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

时间:2017-01-20 16:30:02

标签: javascript jquery asp.net-mvc file-upload jquery-file-upload

我正在使用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"/>,因此我可以附加文件并上传,然后我会看到该文件进入服务器端代码。我处理并添加到数据库,没有问题。

我选择的第一张图片,上传一次。如果我然后选择第二个图像并上传,它会执行上传并点击MVC控制器两次。如果我选择第三张图片,上传会发生三次?它始终命中data.submit() console.log("2a"),即GoogleMap.OnMarkerClickListener,但我不知道为什么会多次出现?

我想知道event.preventDefault()是否导致它被触发?但是,为什么我得到三个,然后四个,然后五个帖子到控制器动作是不明智的呢?

有没有其他人有这个,如果有,你实施了什么来解决它?

提前致谢!

1 个答案:

答案 0 :(得分:1)

这似乎是一个潜在的插件问题,解决方案是取消绑定并重新绑定click事件:

由于我不相信合理的重复标志产生最佳解决方案,我挖了一点:

回调问题

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

html问题

另一个post谈论提交按钮,主动提交表单,而这不应该是实现它的正确方法。

replacefileinput为false?

默认情况下,在每个输入字段更改事件后,文件输入字段将替换为克隆。这对于iframe传输队列是必需的,并允许为相同的文件选择触发更改事件,但可以通过将此选项设置为false来禁用(可以在FAQ中找到更深入的信息)。 EM>

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

为什么在每次选择后克隆并替换文件输入字段?

克隆的完成有两个原因:

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