input type=file 打开选择图片的窗口,会调用多次c

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

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

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

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

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

至此问题解决

上一篇 下一篇

猜你喜欢

热点阅读