显示多文件上载Jquery / Ajax的进度

我有上传表单，允许用户上传多个文件。 我决定如果文件非常大，进度条会很好。 以下是我的源代码。 我是新手jquery通常我只是php但我发现ajax更加用户友好。

 
 
 
 
Upload an image or video
  
 
 
 
 
 
 
 
  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 }); }); });  

图像上传工作正常，数组发送到ajax但进度条不移动。 实际上，调用的两个函数的console.log也不会出现。 是否有正确的方法来调用我的ajax请求中的函数，这将使此进度条工作。

beforeSubmit：beforeSubmit，uploadProgress：OnProgress，成功：afterSuccess，

注意，当控制台显示我的数据时，此function“success：afterSuccess”正在运行。

Answer 1

这是您的HTML表单

这是你的JQuery和ajax。 默认情况下，fileInput是隐藏的。

点击上传按钮

 $("#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 } } } 

你的PHP代码看起来像这样

 $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); ?> 

Answer 2

您必须使用自定义XMLHttpRequest来使用AJAX和jQuery执行此操作。 这里有一个例子： 我如何异步上传文件？