Simple Ajax Uploader- jQuery y PHP

DESCARGA : Simple-Ajax-Uploader

Simple Ajax Uploader- jQuery y PHP, aquí tienes un plugin que sirve para subir archivos al servidor, este simple pero poderoso plugin adjunta archivos a nuestro servidor, lo interesante es que el plugin es muy simple de implementar, si no quieres meterte en problemas para la configuración, con el uso de esta  solución puedes encontrarte con las siguientes características:

1.- Soporta arrastrar y soltar

2.- Carga de archivos múltiples.

3.- Con barras de progreso integrado.

4.- El soporte es de múltiples navegadores.

Puedes encontrarte la demostración en el siguiente enlace :https://www.lpology.com/code/ajaxuploader/  también puedes encontrarte con la documentación correspondiente: https://github.com/LPology/Simple-Ajax-Uploader, los métodos y atributos: https://www.lpology.com/code/ajaxuploader/docs.php

Para usarlo solo tienes que incluir el archivo javascript que se llama: SimpleAjaxUploader.js ubicado en el archivo del plugin.


<script src="SimpleAjaxUploader.js"></script>

La parte de los estilos es opcional, pero puedes agregar bootstrap:


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

Posterior a eso puedes incluir los elementos html que ayudaran a cargar las imagenes.


<div class="container">
        <div class="page-header">
          <h1>Simple Ajax Uploader</h1>
        </div>
          <div class="row" style="padding-top:10px;">
            <div class="col-xs-12">
                
                <!-- progressBar -->
            <div id="progressOuter" class="progress progress-striped active hidden">
                <div id="progressBar" class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                </div>
            </div>
                
            </div>
		</div>
        <div class="row" style="padding-top:10px;">
			<div class="col-xs-12 text-center">
                <!-- Botón para adjuntar archivos -->
              <button id="uploadBtn" class="btn btn-large btn-primary">Examinar</button>
            </div>
        </div>
          
        <div class="row" style="padding-top:10px;">
            <div class="col-xs-12">
                <!-- div para mensajes de error y otros mensajes deseados -->
              <div id="msgBox"style="display:none;"  class="alert alert-success"></div>
            </div>
        </div>
      </div>

Una vez incluido los elementos div para trabajar ya puedes incluir el script que te permite crear el uploader en ajax.


function escapeTags( str ) {
return String( str )
.replace( /&/g, '&amp;' )
.replace( /"/g, '&quot;' )
.replace( /</g, '&lt;' ) .replace( />/g, '&gt;' );
}

window.onload = function() {

var idbtn = document.getElementById('uploadBtn'),
progressBar = document.getElementById('progressBar'),
progressOuter = document.getElementById('progressOuter'),
msgBox = document.getElementById('msgBox');

var uploader = new ss.SimpleUpload({
button: idbtn,
url: 'file_upload.php',
name: 'uploadfile',
multipart: true,
hoverClass: 'hover',
multiple: true,
focusClass: 'focus',

responseType: 'json',
startXHR: function() {
progressOuter.style.display = 'block';
this.setProgressBar( progressBar );
},

onSubmit: function() {
msgBox.innerHTML = '';
idbtn.innerHTML = 'Cargando...';
},

onComplete: function( filename, response ) {
idbtn.innerHTML = 'Examinar';
progressOuter.style.display = 'none';

if ( !response ) {
msgBox.innerHTML = 'Inactiva la carga del archivo';
return;
}

if ( response.success === true ) {
msgBox.style.display = 'block';
msgBox.innerHTML = '<strong>' + escapeTags( filename ) + '</strong> ' + 'Archivo cargado.';

} else {
if ( response.msg ) {
msgBox.innerHTML = escapeTags( response.msg );

} else {
msgBox.innerHTML = 'Hay un error en la carga del archivo.';
}
}
},
onError: function() {
progressOuter.style.display = 'none';
msgBox.innerHTML = 'Hay un error con el plugin';
}
});
};

El archivo(llamado file_upload.php) para subir los archivos indicados en el plugin(url: ‘file_upload.php’) que puedes utilizar puede estar conformado del siguiente código:

<?php $nombreTemporal=$_FILES['uploadfile']['tmp_name']; if(move_uploaded_file($nombreTemporal,$_FILES['uploadfile']['name'])){ exit(json_encode(array('success' => true, 'msg' =>$_FILES['uploadfile']['name'])));  
  }else{
  exit(json_encode(array('success' => false, 'msg' =>"Hay un error")));  
  }
?>

Aunque también puedes usar la librería que este plugin tiene integrado que se encuentra en el ejemplo en el archivo de descarga.
Con ASP.NET

También puedes incluir otras opciones como por ejemplo restringir el tipo de archivo y activar el modo drag and drop.

You may also like...