Javascript 上传重复

Question

我有一点 html 有一个区域，用户可以在其中拖放文件以上传。嵌套在其中的是 "browse for files" 按钮，如果他们选择传统的上传方法，则 clicks() 隐藏文件输入。到目前为止，一切正常，但如果用户拖放多个文件（超过一个），它会上传每个文件两次（3 个拖放文件上传 6 个文件）。如果用户通过浏览文件按钮上传，它不会执行此操作，因此我将其缩小到我的 on ondrop 功能并将其包括在下面。如果问题不在这个代码块中，我可以 post 附加代码。

更新：我在 for 循环之前和之后将我的变量 droppedfile 记录到控制台一次，并注意到在 for 循环和 2 个文件被删除之后记录时，变量包含 2 fileLists 和每个列表都包含两个文件（上传 4 次）。我的 for 循环如何改变我的变量？

 dropzone.ondrop = function(e){
    e.preventDefault();
    this.className = 'dropzone';
    var droppedfile = e.target.files || e.dataTransfer.files;
    for (i=0; i < droppedfile.length; i++) {
       if(droppedfile[i].type != "text/plain" && droppedfile[i].type != "application/pdf" && droppedfile[i].type != "application/msword"){
           alert(droppedfile[i].type + " file types are not allowed.");
       }else{
           uploadButton.innerHTML = 'Uploading...';
           //calls a function that assigns the file to a new formdata obj and sends via ajax                      
           upload(droppedfile);

       }
    }
}

Answer 1

出现这个问题是因为每次执行for循环时你都在上传这两个文件。替换

upload(droppedfile);

与

upload(droppedfile[i]);

或者您可以在上传前确保所有文件都有效

var valid=true;
for (i=0; i < droppedfile.length; i++) {
   if(droppedfile[i].type != "text/plain" && droppedfile[i].type != "application/pdf" && droppedfile[i].type != "application/msword"){
       alert(droppedfile[i].type + " file types are not allowed.");
       valid=false;
   }
}
if(valid) {
   uploadButton.innerHTML = 'Uploading...';                     
   upload(droppedfile);
}

Javascript 上传重复

Javascript uploading duplicates

javascript

ajax

upload