jQuery文件上传-单次上传多次发送数据

Question

我正在使用 jQuery 文件上传将图像异步上传到 .NET MVC 控制器。我有以下运行的脚本

<script type="text/javascript">
$('#Image').fileupload({
    url: "/Home/PostUpdate",
    dataType: 'json',
    replaceFileInput: false,
    dropZone: null,
    autoUpload: false,
    maxNumberOfFiles: 1,
    maxFileSize: 2000000,
    add: function (e, data) {
        $("form").submit(function (event) {
            event.preventDefault();
            console.log("posting from jquery file upload");
            if ($("#Image")[0].files[0].size > 0 && ($("#PostText").val() === "" || $("#PostText").val() === undefined)) {
                // Warning message here
            }
            else {
                console.log("2a");
                data.submit();
            }
        });
    },
    done: function (e, data) {
        // Done code here...
    }
});


$("form").submit(function (event) {
    event.preventDefault();
    if ($("#Image")[0].files[0] == undefined) {
        console.log("posting from default ajax");
        var url = "/Home/PostUpdate/";
        $.ajax({
            url: url,
            datatype: "json",
            data: $(this).serialize(),
            cache: false,
            type: "POST",
            success: function (data) {
                // Success code here
            },
            error: function (response) {
                alert("error");
            }
        });
    }
});

</script>

我的 HTML 是标准的 <input type="file"/>，所以我可以附加一个文件并上传，然后我看到该文件通过服务器端代码。我处理并添加到数据库，没有问题。

第一张图片我select，上传一次。如果我随后选择第二张图片并上传，它会执行上传并两次访问 MVC 控制器。如果我选择第三张图片，上传会发生三次？它总是命中相同的 data.submit()，即发生在 console.log("2a") 的那个，但我不知道为什么它会多次发生？

我想知道是不是 event.preventDefault() 导致了它的触发？但这对于为什么我得到三个、然后是四个、然后是五个帖子到控制器操作没有意义？

有其他人遇到过这个问题吗？如果有，您是如何解决的？

提前致谢！

Answer 1

这似乎是一个潜在的插件问题，解决方案是取消绑定并重新绑定点击事件：

How to upload a file only once with blueimp file upload plugin?
Why Blueimp's JQuery File Upload add all prev. selected files...

由于我不相信合理的重复标志会产生最佳解决方案，因此我进行了更深入的研究：

回调问题

更改事件 fileuploadchange 也可能比 fileuploadadd 效果更好。您可以尝试使用 { change: function(){/**/} } 而不是 { add: function(){/**/} } 但它似乎有点模棱两可。

html 问题

另一个 post 讨论了提交按钮主动提交表单，但这不应该是实现它的正确方法。

将文件输入替换为错误？

默认情况下，文件输入字段在每次输入字段更改事件后被替换为克隆。这是 iframe 传输队列所必需的，并允许为同一文件选择触发更改事件，但可以通过将此选项设置为 false 来禁用（更多 in-depth 信息可以在 FAQ 中找到）。

将其设置为 true 并再次测试。

为什么每次选择后文件输入字段被克隆和替换？

克隆完成有两个原因：

首先要确保即使随后选择了相同的文件（或文件名）也会触发更改事件。
其次允许 iframe 传输的上传队列。

jQuery文件上传-单次上传多次发送数据

jQuery File Upload - Single Upload Sending Data Multiple Times

javascript

asp.net-mvc

jquery

file-upload

jquery-file-upload

回调问题

html 问题

将文件输入替换为错误？