问题背景：我们的云平台系统进入图文发布管理功能，新创建或编辑原有图文，点击本地上传，不选择图片关闭窗口， 点击素材库上传，不选择图片关闭窗口， 再次点击本地上传，选择要上传的图片，最后竟然上传了两张图片，按道理应该是只上传一张的。
经过排查，原来是调用了多次change事件导致的
file input出于安全角度，是不允许赋值的，即使是置空，虽然通过给outerHtml赋值可以清空，但貌似仅在ie下起使用。
因为缺少置空的方法，用户异步上传完毕文件后选择相同文件时，不会触发change，因为在这种情况下，我们没有办法使value（也就是文件路径）发生变化。
那难道就无解了么。。当然不是。。
这里主要用了unbind
// 每次选完文件，就重建此元素，这样值自然是空的 不会触发change
// 此处将js原生对象转化为jquery对象
$($scope.fileObj).unbind().change(function (e) {
if(mediaIndex > 0) {
return
}
mediaIndex++;
onChangeFile(mediainfo)
})
至此问题解决
网友评论