上传多个文件时上传进度

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了上传多个文件时上传进度相关的知识,希望对你有一定的参考价值。

我想上传多个文件(超过1000个文件,总数超过2GB)。在php中,我使用函数

if (move_uploaded_file($_FILES['files']['tmp_name'][$i], $original_file))
                    {
                        $stamp = '../contents/wm_watermark.png';
                        $this->create_watermark_photo($original_file, $stamp, $view_file, $ext);
                        $this->makeThumbnail($view_file, $thumb_file, $this->max_width_thumb, $this->max_width_thumb);

                        //insert photo info to DB
                        $this->Photo->create();
                        $this->Photo->save(
                            array(
                                'Photo' =>  array(
                                    'folder_id' =>  $data_from_preparing_fileInfoList[$i]['sub'],
                                    'name'      =>  $filename
                                )
                            )
                        );

                        $status = '1';
                        $count++;
                    }

我发现,当使用move_upload_file时,它现在没有上传。它只保持等待堆栈。当此函数完成运行时,它将文件移动到服务器。所以,当我使用上传过程,它获得100%,这个ajax网址仍然运行。

$("#image_upload_form").ajaxSubmit({
                    //url: '/admin/photoGroup/ajax_upload_photo', //photo upload process bar
                    type: 'POST',
                    dataType: 'json',
                    data: { data_from_preparing: data_from_preparing},
                    beforeSend: function() {
                        //dialog 1
                        $("#upload-photo-process .progress-bar").css('width', '0');
                        $('#upload-photo-process').modal('show');

                    },
                    /* progress bar call back*/
                    uploadProgress: function(event, position, total, percentComplete) {
                        console.log('percentComplete' + percentComplete);
                        console.log('position: ' + position);
                        console.log('total' + total);
                        var mbPosition = position / 1024 / 1024;
                        var mbTotal = total / 1024 / 1024;
                        var txtProcess = percentComplete + '% | ' + mbPosition + 'Mb/' + mbTotal + 'Mb';
                        var pVel = percentComplete + '%';
                        $("#upload-photo-process .process-status").html(txtProcess);

                        $("#upload-photo-process .progress-bar").css('width', pVel);

                    },

                    /* complete call back */
                    complete: function(xhr) {
                        if (xhr.statusText == "OK") {
                            $('#upload-photo-process').modal('hide');
                            $('#upload-done').modal('show');
                        }

                    }
                    /*success: function(data_from_photo_upload) {

                    }*/

                });

现在,我想在上传进度增加100%时,将所有文件上传到服务器。我怎么能这样?谢谢高级。

答案

试试这可能有用..

	  //attach
	 function sendFileToServer(formData, status, file) {
	   var uploadURL = "index.php?p=ticket-attach&ajax=1"; //Upload URL
	   var extraData = {}; //Extra Data.
	   var jqXHR = $.ajax({
	     xhr: function() {
	       var xhrobj = $.ajaxSettings.xhr();
	       if (xhrobj.upload) {
	         xhrobj.upload.addEventListener('progress', function(event) {
	           var percent = 0;
	           var position = event.loaded || event.position;
	           var total = event.total;
	           if (event.lengthComputable) {
	             percent = Math.ceil(position / total * 100);
	           }
	           //Set progress
	           status.setProgress(percent);
	         }, false);
	       }
	       return xhrobj;
	     },
	     url: uploadURL,
	     type: "POST",
	     contentType: false,
	     processData: false,
	     cache: false,
	     data: formData,
	     dataType: "json",
	     success: function(data) {
	       if (data['error'] == "") {
	         status.setProgress(100);
	         status.setFileNameSize(data['fname'].split(",")[0], file.size);
	         status.appendFN(data['fname']);
	         //var namef= ;
	       } else {
	         //alert(data['error']);
	         status.errorMsg();
	       }
	     }
	   });
	   status.setAbort(jqXHR);
	 }

	 function createStatusbar(obj) {
	   this.statusbar = $("<div class='statusbar'  id=''></div>");
	   this.filename = $("<div class='filename'></div>").appendTo(this.statusbar);
	   this.size = $("<div class='filesize'></div>").appendTo(this.statusbar);
	   this.abort = $("<div class='abort'>&times;</div>").appendTo(this.statusbar);
	   this.progressBar = $("<div class='progressBar'><div></div></div>").appendTo(this.statusbar);
	   obj.append(this.statusbar);
	   this.setFileNameSize = function(name, size) {
	     var sizeStr = "";
	     var sizeKB = size / 1024;
	     if (parseInt(sizeKB) > 1024) {
	       var sizeMB = sizeKB / 1024;
	       sizeStr = sizeMB.toFixed(2) + " MB";
	     } else {
	       sizeStr = sizeKB.toFixed(2) + " KB";
	     }
	     this.filename.html(name);
	     this.size.html("(" + sizeStr + ")");
	     this.statusbar.attr("sizev", size);
	     $("#attach_size").attr("sizev", parseInt($("#attach_size").attr("sizev")) + size);
	     this.setTotalSize();
	   }
	   this.setTotalSize = function() {
	     //set total size
	     var size = parseInt($("#attach_size").attr("sizev"));

	     var sizeStr = "";
	     var sizeKB = size / 1024;
	     if (parseInt(sizeKB) > 1024) {
	       var sizeMB = sizeKB / 1024;
	       sizeStr = sizeMB.toFixed(2) + " MB";
	     } else {
	       sizeStr = sizeKB.toFixed(2) + " KB";
	     }
	     if (sizeStr != "" && size > 0) $("#attach_size").html("(" + sizeStr + ")");
	     else $("#attach_size").html("");
	   }
	   this.setProgress = function(progress) {

	     var progressBarWidth = progress * this.progressBar.width() / 100;
	     this.progressBar.find('div').animate({
	       width: progressBarWidth
	     }, 10).html(progress + "%");
	     if (parseInt(progress) >= 100) {
	       this.progressBar.hide();
	       if ($.isFunction(tinymce.get)) tinymce.get('mail_body').isNotDirty = 0;
	       $("#save_status").html("Not saved");

	       //this.abort.hide();
	     } else {
	       if ($.isFunction(tinymce.get)) tinymce.get('mail_body').isNotDirty = 1;
	       $("#save_status").html("Not saved");
	     }
	   }
	   this.setAbortFD = function() {
	     var sb = this.statusbar;
	     var ts = this;
	     this.abort.click(function() {
	       $.ajax({
	         type: "POST",
	         url: "index.php?p=ticket-dattach&ajax=1",
	         data: "fname=" + sb.children(".filename").children("input").val(),
	         //dataType: "json",
	         success: function(data) {
	           tinymce.get('mail_body').isNotDirty = 0;
	           $("#save_status").html("Not saved");
	         },
	         error: function() {
	           alert('File is not deleted');
	         }
	       });
	       //alert(sb.children(".filename").children("input").val());
	       $("#attach_size").attr("sizev", (parseInt($("#attach_size").attr("sizev")) - parseInt(sb.attr("sizev"))));
	       sb.remove();
	       ts.setTotalSize();
	     });
	   }
	   this.setAbort = function(jqxhr) {
	     var sb = this.statusbar;
	     var ts = this;
	     this.abort.click(function() {
	       jqxhr.abort();
	       if (sb.children(".progressBar").children("div").html() == "100%") {
	         $.ajax({
	           type: "POST",
	           url: "index.php?p=ticket-dattach&ajax=1",
	           data: "fname=" + sb.children(".filename").children("input").val(),
	           //dataType: "json",
	           success: function(data) {
	             tinymce.get('mail_body').isNotDirty = 0;
	             $("#save_status").html("Not saved");
	           },
	           error: function() {
	             alert('File is not deleted');
	           }
	         });
	         $("#attach_size").attr("sizev", (parseInt($("#attach_size").attr("sizev")) - parseInt(sb.attr("sizev"))));
	         sb.remove();
	       } else {
	         sb.remove();
	       }
	       ts.setTotalSize();
	     });
	   }
	   this.appendFN = function(fn) {
	     this.filename.append("<input type=\"hidden\"  name=\"ticket_attach[]\"  value=\"" + fn + "\"   />");
	   }
	   this.errorMsg = function() {
	     var sb = this.statusbar;
	     sb.children(".progressBar").children("div").html("File Error");
	     sb.children(".progressBar").show();
	     sb.children(".filename").children("input").remove()
	   }
	 }

	 function toggle_class(clas) {
	   $("." + clas).toggle();
	 }

	 function insert_attach(input) {
	   var files = input.files;
	   $.each(files, function(idx, file) {
	     var fd = new FormData();
	     fd.append('ticket_attach', file);
	     var obj = $(".note-attachbox");
	     var status = new createStatusbar(obj); //Using this we can set progress.
	     status.setFileNameSize(file.name, file.size);
	     sendFileToServer(fd, status, file);
	   });
	   $("#afile_browser").val("");
	 }
.abort {
  color: red;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="note-attachbox" id="attachbox" style="position: relative; display: inline;"></div>
<input type='file' id='afile_browser' onchange='return insert_attach(this);' style="opacity: 0; position: relative; display: inline; cursor: pointer; width: 100px; padding: 1px 0px; border: medium none;" multiple>
<div style="cursor: pointer; color: rgb(59, 179, 36); display: inline-block; font-weight: bold; font-size: 20px; vertical-align: middle; background: none; 

以上是关于上传多个文件时上传进度的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 alamofire 上传多个文件并显示进度?

如何在家庭活动android上显示进度对话框?

尝试在列表视图中显示每个文件上传的进度时 UI 卡住

多个图像上传进度问题

使用jquery.form.js实现文件上传及进度条前端代码

jquery 多个 上传文件教程