jquery - BlueImp JQuery 上传上传后不清除文件队列

标签 jquery ajax file-upload upload blueimp

我有两个问题,它们可能是相关的。我正在使用 BlueImp 的 Upload 插件将多个文件上传到 ASP.NET MVC Controller ,然后该 Controller 返回所需的 JSON 响应。单击按钮即可触发上传。

我希望上传者将列表项添加到 <ul>对于正在上传的每个项目(工作正常)。然后我想刷新显示已成功上传的文件的列表。问题是,即使成功上传后,“旧”文件仍保留在控件中。

例如,如果我成功上传两个文件,那么当我想再上传两个文件时,将向 Controller 发送四个文件。

第二个问题是我使用progressall回调来监视所有文件何时上传完毕。由于某种原因,应该在回调中执行的代码没有被执行。代码带有注释以指示问题发生的位置。

我怀疑控件存在问题,无法识别上传已完成,因此存在未执行成功上传代码的问题,然后未清除文件。我不知道为什么!

$('.filemanager-browse').fileupload({
            url: '/Files/UploadFile',
            dataType: 'json',
            singleFileUploads: false,
            add: function (e, data) {

                var queue = $("ul.queue");

                $(".upload-button").click(function () {

                    $.each(data.files, function (index, file) {
                        var queueItem = $("<li>Uploading: " + file.name + "</li>");
                        data.context = queueItem.prependTo(queue);
                    });

                    data.submit();
                });
            },
            progress: function (e, data) {

                $.each(data.files, function (index, file) {
                    /// Code to indicate the progress of individual uploads as the progress. Working fine.
                });

            },
            done: function (e, data) {

                $.each(data.files, function (index, file) {
                    /// Code to indicate that each file has been uploaded. Working fine.
                });

            },
            error: function (e, data) {

                $.each(data.files, function (index, file) {
                    /// Code to indicate any errors.
                });
            },
            progressall: function (e, data) {

                if (data.loaded == data.total) {
                    // SOURCE OF PROBLEM 2: 
                    // CODE IN HERE NOT EXECUTING AFTER SUCCESSFUL UPLOAD
                }
            },
            always: function (e, data) {

            },
            stop: function (e, data) {
                // Should code that is in progress all be in here instead?
             }
        });

最佳答案

我最终这样做了:

$('#fileupload').fileupload()
  .bind('fileuploadadd', function(e, data) {
    $(".files tr").remove();
  });

因此,每当有人添加文件时,表中具有“files”类的所有行都会从 DOM 中删除。根据您的标记,您可能需要选择不同的元素来删除。

关于jquery - BlueImp JQuery 上传上传后不清除文件队列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27225397/

相关文章:

javascript - 使用 multer 上传文件不能完全工作 (NodeJS)

jquery - 为什么 jQuery 不能在我的家庭(本地)计算机上运行?

jquery - 使用 .cssRules 访问跨域样式表

javascript - 使用 Rails 后端在 Angular 中渲染初始 View

javascript - 在 IE 中解析 A​​jax 加载的 HTML 内容

javascript - 在提交到服务器之前如何在 Fine Uploader 中获取图像的尺寸并验证它?

php - 即使 if 条件失败,POST 方法也能工作

javascript - 在 ROR 中加载 AJAX 后,如何使页面跳转到顶部?

jquery - 如何根据之前的输入限制页面中 'date'类型的输入?

c# - 从文件夹中检索图像文件并显示到图像控件中