解决重复上传 onchange 事件不生效问题

javascript onchange不生效

阿V

2023-09-28

在做项目的是时候，上传表单使用到了onchange事件，当上传失败后，重复上传该文件，没有反应，发现是onchange没有生效。

onchange的触发条件是当input框的值有变化时才能触发，所以，当上传的文件是同一个文件时不能触发onchange。

例如我的代码：

uploadFile.onchange = function () {
    var formData = new FormData($('form')[0]);
    formData.append('file', $('input[type=file]').attr('name'));
    ......
}

其中有判断当上传失败则提示错误信息这一段：

xhr.addEventListener("load", function (event) {
    var data = eval('(' + xhr.response + ')');
    if(data.code == 0){
        layer.alert(data.msg);
        layer.close(uploadloading);
        return false;
}

解决方法：

当上传失败时，把上传表单的值置空，加上

$("#js-upload-files").val('');

xhr.addEventListener("load", function (event) {
    var data = eval('(' + xhr.response + ')');
    if(data.code == 0){
        layer.alert(data.msg);
        layer.close(uploadloading);
        $("#js-upload-files").val('');
        return false;
}