我正在使用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()是否导致它被触发?但是,为什么我得到三个,然后四个,然后五个帖子到控制器动作是不明智的呢?
有没有其他人有这个,如果有,你实施了什么来解决它?
提前致谢!
答案 0 :(得分:1)
这似乎是一个潜在的插件问题,解决方案是取消绑定并重新绑定click事件:
由于我不相信合理的重复标志产生最佳解决方案,我挖了一点:
更改事件fileuploadchange
也可能比fileuploadadd
效果更好。您可以尝试使用{ change: function(){/**/} }
而不是{ add: function(){/**/} }
,但这看起来有点模棱两可。
另一个post谈论提交按钮,主动提交表单,而这不应该是实现它的正确方法。
默认情况下,在每个输入字段更改事件后,文件输入字段将替换为克隆。这对于iframe传输队列是必需的,并允许为相同的文件选择触发更改事件,但可以通过将此选项设置为false来禁用(可以在FAQ中找到更深入的信息)。 EM>
将其设置为true
并再次测试。
为什么在每次选择后克隆并替换文件输入字段?
克隆的完成有两个原因: