为jQuery-File-Upload实现删除按钮

我可能会以完全错误的想法接近这个，所以让我先解释一下我的情况。

我想用jQuery-File-Upload实现的目的是让用户选择他们选择上传的文件。 他们将被允许选择多个文件。 目前，无论什么类型都没关系，但它们主要是上传图片。 所选文件将显示在列表中，每个文件的文件名右侧都有一个“删除”按钮。 如下图所示。

如何实现允许用户从等待上载的文件列表中删除他们选择的文件的方法？

一旦用户对选择的文件感到满意，他们将点击“开始上传”按钮，该按钮将开始上传列表中包含的文件并触发上图所示的进度条。

我自己尝试了一些故障排除，包括记录单击按钮时发生的事件，但无法将其从选择上传的文件列表中删除。 我知道有一个回调，但我不确定这是不是我应该使用的。

以下是我的代码。

 $(function () { $('#fileupload').fileupload({ dataType: 'json', url: '../php/', add: function (e, data) { //$.each(data.files, function(index, file) { data.context = $('
') //.html(file.name+"") // see https://stackoverflow.com/questions/26234279/blueimp-jquery-upload-multiple-files-doesnt-work for the reason for the line below .html(data.files[0].name+"") .appendTo(".list-group"); /*$('.btn-danger').on('click', function() { console.log('Drop '+file.name+' \n'); });*/ //}); $('.btn-danger').on('click', function(e, data) { //console.log("Removing all objects...\n"); //data.context.remove(data.files[0].name); //data.context.remove(data.files[0]); e.preventDefault(); /*var filename = $(this).parent().text(); console.log("Filename: "+filename); data.context.remove(data.files.filename); console.log("Clicked the drop button");*/ try { // here I try thinking that I can call the drop() callback but I'm still trying to wrap my head around how this all works. drop(e, data); } catch(error) { console.log("The error was: "+error); } }); }, submit: function (e, data) { $('#start-upload').on('click', function() { //$('#start-upload').addClass('#disabledInput'); console.log("This is the start upload button!"); }); }, done: function (e, data) { /*$.each(data.result.files, function (index, file) { $('
').text(file.name).appendTo('.files').find('#panel-body'); });*/ }, progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('#progress .bar').css( 'width', progress + '%' ); }, drop: function (e, data) { $.each(data.files, function (index, file) { //$('.btn-danger').on('click', function() { console.log('Dropped file: '+ file.name +'\n'); //}); }); } }).on('.fileuploadsubmit', 'click', function(e, data) { console.log("Submit button pressed."); //data.formData = data.context.find(':input').seralizeArray(); }); }); 

最后，如果所有这些都放在我的$(document).ready ？

我确实意识到这可能是这篇文章的重新发布，但这是两个问题，在这里我认为我把它细分为更小的问题。

Answer 1

通过点击事件上传中止

首先，我需要告诉你，我已经建立了类似于你的东西。 达到这一点后，我问自己同样的问题，最后到此为止。 不幸的是，我不得不自救并解决了它。

您的基本问题是您正在使用方法签名来执行click事件（ function(e, data) ），该事件将覆盖包含add方法（ function(e, data) ）的签名。 因此，在您尝试删除数据上下文时，您实际上正在更改click事件的数据。 因此，只需在click事件中保留变量（或重命名它们），因为在您的示例中您不需要它们。

在这之后你最终试图干净地“破坏”上传。 我想出来，首先中止它们并禁用任何后续提交都很干净。

这是一个适合您需求的工作代码示例，并且有一些不言自明的注释：

 add: function (e, data) { // Append data context to collection. data.context = $('
'+data.files[0].name+'') .appendTo('.list-group'); // Search in the children of the data context for the button // and register the click event. data.context.children('button') .click(function () { // This button will be disabled. $(this).addClass('disabled'); // Abort the data upload if it's running. data.abort(); // Overwrite the plugin's default submit function. data.submit = function () { return false; }; // Optional: Remove the data context (thus from collection). //data.context.remove(); }) ; }, 

附加提示：不要对JavaScript使用双引号，因为您需要在HTML标记中转义它们。

如何加载JavaScript

这个问题远比你想象的复杂得多。 这是关于整合/清除HTML标记与页面加载的永无止境的讨论。 在选择一个方向时，最终会在onload-events和jQuery之间进行另一种选择。 您应该打开另一个问题或尝试找到相关的问题。 在这样做时，我同意将脚本放在一个干净的匿名函数中，该函数在文档准备好后自动加载： $(function() { /*yourcontent*/ }); 。

Answer 2

根据插件的文档，应该有一个.destroy方法，但是文档对于如何初始化它，或者它是从数组中销毁文件，还是仅销毁整个表单都非常模糊。 应该有一种方法，至少在理论上应该有。

至于第二部分，是的。 您的代码应该在jQuery初始化程序中，例如$(document).ready或更受欢迎的$(function() {});