jquery - 取消单个文件，使用jquery文件上传

Question

我想取消单个文件，使用 jquery 文件上传插件。我想用核心插件来做，不需要所有的 UI 东西。

在我的本地文件系统上选择文件后，这些文件位于何处？

Answer 1

我在我的项目中这样做了：为每个文件附加上传和取消按钮

$('#TestForm').fileupload({
         dataType : 'json',
         autoUpload : false,
         add : function(e, data) {
             var file=data.files[0];
             var vOutput="";
             vOutput+="<tr><td>"+file.name+"</td>"
             vOutput+="<td><input type='button' class='fileUpload' value='upload'></td>"
             vOutput+="<td><input type='button' class='fileCancel' value='cancel'></td></tr>"
             $("#TestTable").append(vOutput)
             $(".fileUpload").eq(-1).on("click",function(){
                  data.submit();
             })
             $(".fileCancel").eq(-1).on("click",function(){
                  $(this).parent().parent().remove()
             })
         }
})

如果您愿意，您还可以添加按钮来上传或取消所有文件，如下所示：

    $("#fileUploadAll").on("click", function() {
        $(".fileUpload").click(); // click all upload buttons
    })
    $("#fileCancelAll").on("click", function() {
        $(".fileCancel").click(); //click all cancel buttons
    })

HTML：

<form id='TestForm'>
     <input type="file" id="FileSelect" name="files[]" data-url="yourURL.php" multiple/>
     <input type="button" value="upload all" id="fileUploadAll"/>
     <input type="button" value="cancel all" id="fileCancelAll"/>
     <table id='TestTable'></table>
</form>

Answer 2

如果您不想覆盖 add 方法，这里提到了另一个选项：添加取消上传或中止功能以引导多个文件上传插件

$('#fileupload').bind('fileuploadadd', function(e, data){
  var jqXHR = data.submit(); // Catching the upload process of every file
  $('#cancel_all').on('click',function(e){
        jqXHR.abort();
  });
});

它使用从 submit 方法返回的 jqXHR 对象。只是不要忘记关闭自动上传设置。如果您不想取消所有上传，请确保将点击事件附加到该文件的相应元素。

Answer 3

我有一个案例，我们需要运行检查以查看所选文件是否已存在于服务器上，并提供覆盖它的选项。如果用户选择不覆盖文件，那么我们不想将文件上传到服务器，而是将其保留在队列中，以防他们改变主意，即不要删除整个 tr。

为此，您只需将disabled属性添加到要阻止上传的 tr 中的开始按钮。jQuery fileupload 将像往常一样在队列中搅动，并忽略任何具有禁用开始按钮的行。