Blueimp 文件上传：我的 DELETE 链接不起作用答案

【问题标题】：Blueimp file upload : my DELETE link doesn't workBlueimp 文件上传：我的 DELETE 链接不起作用
【发布时间】：2015-03-13 15:47:49
【问题描述】：

这是我的表格（基本上传）：

<span class="btn btn-success fileinput-button">
    <span>Select files...</span>
    <input id="fileupload" type="file" name="files[]" multiple>
</span>
<br>
<div id="files" class="files"></div>

这是我的脚本：

$(function () {
    $('#fileupload').fileupload({
        url: 'server/php/',
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo('#files');
            data.submit();
        },
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').html('<a href="#" class="text-danger delete" data-type="' + file.deleteType + '" data-url="' + file.deleteUrl + '" title="Delete">Delete</a>').appendTo('#files');
            });
        }
    });
});

我的上传正常，但是当我点击删除链接时，什么也没有发生。这个链接好像没有效果。也许我错过了包含一些内容？

有什么想法吗？

【问题讨论】：

您在控制台中看到了哪些错误？

标签： jquery jquery-file-upload blueimp

【解决方案1】：

除非我遗漏了什么，否则您还没有在链接上设置事件侦听器。

$('#files').on('click', 'a', function (e) {
  e.preventDefault();

  var $link = $(this);

  var req = $.ajax({
    dataType: 'json',
    url: $link.data('url'),
    type: 'DELETE'
  });

  req.success(function () {
    $link.closet('p').remove();
  });
});

【讨论】：

我的错...你摇滚！
您能告诉我如何从响应 GUI 中删除删除链接

【解决方案2】：

您可能已经解决了您的问题，但只是为任何新的解决方案寻求者添加了我的答案。

您不需要像@rglyall 那样手动发出删除请求，只需正确设置 html 结构，Jquery-file-upload 就会自行处理。

改变

<a href="#" class="text-danger delete" data-type="' + file.deleteType + '" data-url="' + file.deleteUrl + '" title="Delete">Delete</a>

到

<button class="text-danger delete" data-type="' + file.deleteType + '" data-url="' + file.deleteUrl + '" title="Delete">Delete</button>

您需要确保库自动处理以下内容，即

Html 元素必须是“按钮”。
此按钮必须具有“删除”类。
此按钮必须具有“数据类型”。
此按钮必须有“data-url”。

【讨论】：