input type=file 打开选择图片的窗口,会调用多次chang事件,进而上传多次

问题背景:我们的云平台系统进入图文发布管理功能,新创建或编辑原有图文,点击本地上传,不选择图片关闭窗口, 点击素材库上传,不选择图片关闭窗口, 再次点击本地上传,选择要上传的图片,最后竟然上传了两张图片,按道理应该是只上传一张的。

经过排查,原来是调用了多次change事件导致的
file input出于安全角度,是不允许赋值的,即使是置空,虽然通过给outerHtml赋值可以清空,但貌似仅在ie下起使用。

因为缺少置空的方法,用户异步上传完毕文件后选择相同文件时,不会触发change,因为在这种情况下,我们没有办法使value(也就是文件路径)发生变化。

那难道就无解了么。。当然不是。。
这里主要用了unbind

// 每次选完文件,就重建此元素,这样值自然是空的 不会触发change
// 此处将js原生对象转化为jquery对象
$($scope.fileObj).unbind().change(function (e) {
    if(mediaIndex > 0) {
                    return
    }
    mediaIndex++;
    onChangeFile(mediainfo)
                    })

至此问题解决

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容