Carga de archivos via ajax con barra de proceso
En este nuevo post les mostraré como hice la carga de archivos con un script en js y un archivo php en el servidor , quiero pensar que como a mí les ha pasado de como capturar el proceso mientras el archivo se carga y puedan mostrar el porcentaje .
Les dejo el código para que lo analicen y cualquier duda me pueden preguntar
Para comenzar definamos la etiqueta form donde tengo el input file que al darle onclick abre la ventana para escoger el archivo
<form method="post" action="" enctype="multipart/form-data" id="uploadForm" >
<label>Adjuntar archivo: </label><br>
<input type="file" class=" inputfile inputfile-1 form-control" name="file" id="demoimg" />
<label id="seleccionar">
<svg xmlns="http://www.w3.org/2000/svg" class="iborrainputfile" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path></svg>
<span class="iborrainputfile">Seleccionar archivos</span>
</label>
<div id="vfileNames"></div>
<p></p>
<div class='progress' ><div id='progress_id' class='progress-bar progress-bar-striped active'role='progressbar' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100' style='width: 0%'></div>
</div>
<div style="margin-left: 86%;padding-top: 0px;" class='percent' id='percent'>0%</div>
<div id="contador"></div>
<div id="cargado"></div>
<div id='salidaImagen'></div>
</form>
Estos son los estilos *_*_*_*_*_*_*_*_*_*_*_*_*_*
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile + label {
max-width: 80%;
font-size: 1.25rem;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
display: inline-block;
overflow: hidden;
padding: 0.625rem 1.25rem;
}
.inputfile + label svg {
width: 1em;
height: 1em;
vertical-align: middle;
fill: currentColor;
margin-top: -0.25em;
margin-right: 0.25em;
}
.iborrainputfile {
font-size:16px;
font-weight:normal;
font-family: 'Lato';
}
Este es el script que les comentaba
$(function(){
$("#seleccionar").click(function(){
$("#demoimg").click();
});
$(document).on('drop dragover', function (e) {
e.preventDefault();
});
//call a function to handle file upload on select file
$('#demoimg').on('change', fileUpload);
});
function fileUpload(event){
$("#progress_id").css("width", "0%");
$("#percent").text("0%");
//notify user about the file upload status
var url="cargarchivos.php",
//get selected file
files = event.target.files;
//form data check the above bullet for what it is
var data = new FormData();
//file data is presented as an array
for (var i = 0; i < files.length; i++) {
var file = files[i];
//append the uploadable file to FormData object
data.append('file', file, file.name);
//create a new XMLHttpRequest
var xhr = new XMLHttpRequest();
//post file data for upload
xhr.open('POST', url, true);
xhr.send(data);
xhr.onload = function () {
//get response and show the uploading status
var response = JSON.parse(xhr.response);
if(response.error==0){
nombreimagen=response.name;
/* console.log(nombreimagen);
*/
vattachedFiles.push(nombreimagen);
// console.log(vattachedFiles);
//window.clearInterval(interval);
showAttachedFiles();
}
if (typeof(response.error) === "string") {
alert(response.error);
$("#progress_id").stop();
$("#percent").text("Error");
$("#progress_id").css("width", "0%");
}
};
xhr.onprogress = function(e) {
var progressBar = document.querySelector('#progress_id');
/* console.log(e);*/
if (e.lengthComputable) {
var percentValue = (e.loaded*100/e.total) + '%';
$("#progress_id").animate({
width: '' + percentValue + ''
}, {
duration: 1000,
easing: "linear",
step: function (x) {
percentText = Math.round(x * 100 / e.loaded);
if(percentText >= "100") {
$("#percent").text("COMPLETADO");
$("#progress_id").css("width", "100%");
}else{
$("#percent").text(percentText + "%");
}
}
});
}
};
}
$("#progress_id").css("width", "0%");
}
Ese seria la primera parte para la carga, en el código utilizamos el xhr = new XMLHttpRequest(); , esto es una instancia que nos permite enviar el archvio al servidor .
En la variable url que tenemos definida direccioné al archivo cargarchivos.php enseguida les mostraré el código
header('Access-Control-Allow-Origin: *');
header('Content-Type: text/plain');
header('Content-Length: ');
header('Accept-Ranges: bytes');
// Only accept files with these extensions
$whitelist = array('jpg','jpeg','png','PNG','xlsx','pdf','docx','txt','exe','pptx','zip','rar');
$name = null;
$error = 'No se pudo cargar el archivo.';
$uploads_dir = dirname(dirname(__FILE__)).'/archivossolicitud';
if (isset($_FILES)) {
if (isset($_FILES['file'])) {
try{
$tmp_name = $_FILES['file']['tmp_name'];
$name = basename($_FILES['file']['name']);
$error = $_FILES['file']['error'];
if ($error === UPLOAD_ERR_OK) {
$extension = pathinfo($name, PATHINFO_EXTENSION);
if (!in_array($extension, $whitelist)) {
$error = 'Tipo de archivo inválido.';
} else {
move_uploaded_file($tmp_name,$uploads_dir.'/'.$name);
}
}
}catch(Exception $e){
$error=$e;
}
}
}
echo json_encode(array(
'name' => $name,
'error' => $error,
));
die();
Este es un código muy simple en el cual tomo el nombre del archivo y redirijo a donde quiero que lo mande, solamente valido si la extensión es la que necesito
y al final hago un echo en json-encode donde mando la respuesta con el nombre de la imagen
Comentarios
Publicar un comentario
Hola que tal,dime tu opinión