如何通过单击按钮排队文件并开始上传？ [英] How to queue files and start uploads with a button click?

问题描述

The code below is calling webapi on drop and will send file one by one. How to get all the files first and upload them all? Because on the server side, I need to put those files in its each unique folder so that multiple users can download theirs but as of now, as this is sending file one by one, It will create a folder for each file which is not ideal. Why?

    function handleFileUpload(files, obj) {
                        for (var i = 0; i < files.length; i++) {
                            var fd = new FormData();
                            fd.append('file', files[i]);
                            var status = new createStatusbar(obj); //Using this we can set progress.
                            status.setFileNameSize(files[i].name, files[i].size);

                        }
                    
                     var submit = $("#submit-button-id");
                     submit.on('click', function (e)
                    {
                        e.preventDefault();
                        alert("clicked nest!")
                        sendFileToServer(fd, status);
                    });
            }

and here is the WEB API AJAX call function: 

 

     function sendFileToServer(formData, status) {
                    var uploadURL = _config.UploadPrismaTemplates;
                    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,//not to set any content header
                        processData: false, //not to process data
                        cache: false,
                        data: formData,
                        success: function (data) {
                            status.setProgress(100);
                           //$("#status1").append("File upload Done<br>");
                            alert("set progress success");
                        },
                        error: function (xhr, status, error)
                        {
                            alert(error);
                        }
                    });
    
                    status.setAbort(jqXHR);
    
                } /*send file to server ends here*/

我尝试过：

What I have tried:

var submit = $("#submit-button-id");
                   submit.on('click', function (e)
                  {
                      e.preventDefault();
                      alert("clicked nest!")
                      sendFileToServer(fd, status);
                  });

我试图将提交按钮中的AJAX调用的sendtoServer函数包装起来但是它逐个发送文件

I tried to wrap the sendtoServer function which is AJAX call in submit button but it is sending files one by one

推荐答案

（＃submit-button-id）;
submit.on（'click'，function（e）
{
e.preventDefault（）;
alert（clicked nest！）
sendFileToServer（fd） ，状态）;
}）;
}

这里是WEB API AJAX调用函数：



函数sendFileToServer（formData，status）{
var uploadURL = _config.UploadPrismaTemplates;
var extraData = {}; //额外数据
var jqXHR =

("#submit-button-id"); submit.on('click', function (e) { e.preventDefault(); alert("clicked nest!") sendFileToServer(fd, status); }); } and here is the WEB API AJAX call function: function sendFileToServer(formData, status) { var uploadURL = _config.UploadPrismaTemplates; var extraData = {}; //Extra Data. var jqXHR =

.ajax（{
xhr：function（）{
var xhrobj =

.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） ;
}
//设置进度
status.setProgress（百分比）;
}，false）;
}
返回xhrobj;

}，
url：uploadURL，
类型：POST，
contentType：false，//不设置任何内容标头
processData： false，//不处理数据
cache：false，
data：formData，
success：function（data）{
status.setProgress（100）;
//

.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,//not to set any content header processData: false, //not to process data cache: false, data: formData, success: function (data) { status.setProgress(100); //

这篇关于如何通过单击按钮排队文件并开始上传？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！