Javascript上传重复项答案

【问题标题】：Javascript uploading duplicatesJavascript上传重复项
【发布时间】：2015-10-27 16:46:49
【问题描述】：

我有一些 html，其中包含用户可以拖放文件以上传的区域。嵌套在其中的是一个“浏览文件”按钮，如果他们选择传统的上传方法，clicks() 是一个隐藏的文件输入。到目前为止一切正常，除了如果用户拖放多个文件（多个文件），它会将每个文件上传两次（3 个删除的文件上传 6 个文件）。如果用户通过浏览文件按钮上传，则不会执行此操作，因此我将其缩小到我的 ondrop 函数并将其包括在下面。如果问题不在此代码块中，我可以发布其他代码。

更新：我在 for 循环之前和之后将我的变量 droppedfile 记录到控制台一次，并注意到当在 for 循环和 2 个文件被删除之后记录时，变量包含 2 个文件列表，每个列表都包含文件（进行 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);

       }
    }
}

【问题讨论】：

标签： javascript ajax upload

【解决方案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);
}

【讨论】：

我刚回来发帖说我想通了。我实际上将函数调用移到了 for 循环之外。你认为如果我使用 try/catch 来处理用户丢弃不接受的文件类型的错误会更干净吗？
这里似乎没有必要使用 try catch，因为您可以简单地区分有效文件和无效文件。但是，您可以做的一件事是从队列中删除无效文件，并询问您是否可以上传剩余的文件并继续执行。如果您在允许文件上传之前还有一些检查，例如损坏的文件或超出特定大小的文件，请使用 try catch。