javascript - leer - Mostrar un progreso en la carga de múltiples archivos Jquery/Ajax

leer xml jquery ajax

Question

Tengo formulario de carga que permite a los usuarios subir varios archivos. Decidí que una barra de progreso sería buena si los archivos son bastante grandes. A continuación se muestra mi código fuente. Soy nuevo en jquery, normalmente solo php, pero me parece que ajax es más fácil de usar.

<div id="new_upload">
<div class="close_btn"></div>
<div id="uploads"></div>
<form action="global.func/file_upload.php" method="post" enctype="multipart/form-data" id="upload_file">
<fieldset><legend>Upload an image or video</legend>
<input type="file" id="file" name="file[]" placeholder="Upload Image or Video" multiple /><input type="submit" value="upload file" id="upload_file_btn" required />
</fieldset>
<div class="bar">
<div class="bar_fill" id="pb">
<div class="bar_fill_text" id="pt"></div>
</div>
</div>
</form>
</div>
<script>
function OnProgress(event, position, total, percentComplete){
//Progress bar
console.log(total);
$(''#pb'').width(percentComplete + ''%'') //update progressbar percent complete
$(''#pt'').html(percentComplete + ''%''); //update status text
}
function beforeSubmit(){
console.log(''ajax start'');
}
function afterSuccess(data){
console.log(data);
}
$(document).ready(function(e) {
$(''#upload_file'').submit(function(event){
event.preventDefault();
var filedata = document.getElementById("file");
formdata = new FormData();
var i = 0, len = filedata.files.length, file;
for (i; i < len; i++) {
file = filedata.files[i];
formdata.append("file[]", file);
}
formdata.append("json",true);
$.ajax({
url: "global.func/file_upload.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
dataType:"JSON",
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
return myXhr;
},
beforeSubmit: beforeSubmit,
uploadProgress:OnProgress,
success: afterSuccess,
resetForm: true
});
});
});
</script>

La carga de la imagen funciona bien, la matriz se envía a ajax pero la barra de progreso no se mueve. De hecho, la consola.log para las dos funciones llamadas necesita producir esto tampoco aparece. ¿Existe una forma correcta de llamar a las funciones en mi solicitud de ajax que haría que esta barra de progreso funcione?

antesSubmit: beforeSubmit, uploadProgress: OnProgress, éxito: afterSuccess,

TENGA EN CUENTA que esta función ''success: afterSuccess'' está funcionando ya que la consola muestra mis datos.

Answer 1

Debe usar un XMLHttpRequest personalizado para hacer esto con AJAX y jQuery. Aquí hay un ejemplo: ¿Cómo puedo cargar archivos de forma asíncrona?

Answer 2

Este es tu formulario HTML

<form method="post" action="uploadImages.php" name =''photo'' id=''imageuploadform'' enctype="multipart/form-data">
<input hidden="true" id="fileupload" type="file" name="image[]" multiple >
<div id ="divleft">
<button id="btnupload"></button>
</div>
</form>

Esta es tu JQuery y Ajax. Por defecto el fileInput está oculto.

Botón de carga pulsado

$("#btnupload").click(function(e) {
$("#fileupload").click();
e.preventDefault();
});
$(''#fileupload'').change(function (e) {
$("#imageuploadform").submit();
e.preventDefault();
});
$(''#imageuploadform'').submit(function(e) {
var formData = new FormData(this);
$.ajax({
type:''POST'',
url: ''ajax/uploadImages'',
data:formData,
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){
myXhr.upload.addEventListener(''progress'',progress, false);
}
return myXhr;
},
cache:false,
contentType: false,
processData: false,
success:function(data){
console.log(data);
alert(''data returned successfully'');
},
error: function(data){
console.log(data);
}
});
e.preventDefault();
});
function progress(e){
if(e.lengthComputable){
var max = e.total;
var current = e.loaded;
var Percentage = (current * 100)/max;
console.log(Percentage);
if(Percentage >= 100)
{
// process completed
}
}
}

Tu código php se ve así

<?php
header(''Content-Type: application/json'');
$valid_exts = array(''jpeg'', ''jpg'', ''png'', ''gif''); // valid extensions
$max_size = 30000 * 1024; // max file size in bytes
$json = array();
if ( $_SERVER[''REQUEST_METHOD''] === ''POST'' )
{
for($i=0;$i<count($_FILES[''image''][''tmp_name'']);$i++)
{
$path="image/uploads/photos/";
if(is_uploaded_file($_FILES[''image''][''tmp_name''][$i]) )
{
// get uploaded file extension
$ext = strtolower(pathinfo($_FILES[''image''][''name''][$i], PATHINFO_EXTENSION));
// looking for format and size validity
if (in_array($ext, $valid_exts) AND $_FILES[''image''][''size''][$i] < $max_size)
{
// unique file path
$uid = uniqid();
$date = date(''Y-m-d-H-i-s'');
$path = $path ."image_" .$date. ''_'' . $uid . "." .$ext;
$returnJson[]= array("filepath"=>$path);
$filename = "image_" . $date . "_" .$uid . "." . $ext;
$this->createthumb($i,$filename);
// move uploaded file from temp to uploads directory
if (move_uploaded_file($_FILES[''image''][''tmp_name''][$i], $path))
{
//$status = ''Image successfully uploaded!'';
//perform sql updates here
}
else {
$status = ''Upload Fail: Unknown error occurred!'';
}
}
else {
$status = ''Upload Fail: Unsupported file format or It is too large to upload!'';
}
}
else {
$status = ''Upload Fail: File not uploaded!'';
}
}
}
else {
$status = ''Bad request!'';
}
echo json_encode($json);
?>