input文件类型上传之onchange触发问题

发表于 | 更新于 | 分类于 | 阅读次数：

问题

使用input的文件上传在连续上传两个相同文件时没有触发change事件，纳尼？！

经过一帆查找资料，原来，使用input[type=file]上传文件，使用的是onchange去做，onchange监听的是input的value值，只有在内容发生改变的时候去触发，而value值在上传文件的时候保存的是文件的内容，连续上传相同文件的话，value值不改变，change事件进而不会触发。

原来是这样啊。如何解决呢？

在change事件函数中的最后设置当前input的value值为空就好了~

$(this).val('');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
function showFile(files){
            var length = files.length;
            if(length == 0){
                return false;
            }


            var filename = files[0].name; //文件名称
            var filesize = Math.floor((files[0].size)/1024);
            //判断上传的文件是否是重复的
            var pre = document.getElementById("preview");
            var listP=pre.getElementsByTagName("p");
            for(let i = 0;i<listP.length;i++){
                if(filename==$(listP[i]).data('name')){
                    if(filesize==$(listP[i]).data('size')){
                        alert("不要上传重复文件哦");
                        return false;
                    }
                }
            }

            var str = 
                    "<div class='panel panel-info' style='margin-top:10px;border:1px solid #14a6ef;'>"+
                    "<div class='panel-heading' style='height:40px;line-height:20px;font-size: 12px;color:#14a6ef;'>"+
                    "    <p data-name='"+filename+"' data-size='"+filesize+"'>文件名称："+filename+"&nbsp;&nbsp;大小："+filesize+"KB</p>"+
                    "</div>"+
                    "<div class='panel-body row' style='height:60px;'>"+
                    "<div class='col-md-2'><select class='color-type' style='vertical-align: middle;height:30px;width:70px;'><option value='0'>黑白</option><option value='1'>彩色</option> </select></div>"+
                    "<div class='col-md-2'><select class='color-type' style='vertical-align: middle;height:30px;width:70px;'><option value='1'>单面</option><option value='2'>双面</option> </select></div>"+
                    "<div class='col-md-2'><input type='number' class='pull-right' style='vertical-align: middle;height:30px;width:70px;' value='0' placeholder='份数'></div>"+
                    "<div class='col-md-1' style='line-height:30px;padding-left: 0;'>份</div>"+
                    "<div class='col-md-2'><input type='number' class='pull-right' style='vertical-align: middle;height:30px;width:70px;'  value='0' disabled ></div>"+
                    "<div class='col-md-1' style='line-height:30px;padding-left: 0;' >张/份</div>"+
                    "</div>"+
                    "</div>";
            $("#preview").append(str);
            return true;
        }
        
    
         $('#upload-doc').on("change",function(){
                var fileList = this.files;

                console.log("test");
                if(showFile(fileList)){
                    //上传

                    xhr = new XMLHttpRequest();
                    xhr.open("post", "upload.php", true);
                    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

                    var fd = new FormData();
                    fd.append('mypic', fileList[0]);
                    xhr.send(fd);

                }
                $(this).val('');
            });

下面放上一个拖拽上传文件的函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//阻止浏览器默认行。
$(document).on({
    dragleave:function(e){    //拖离
        e.preventDefault();
    },
    drop:function(e){  //拖后放
        e.preventDefault();
    },
    dragenter:function(e){    //拖进
        e.preventDefault();
    },
    dragover:function(e){    //拖来拖去
        e.preventDefault();
    }
});

var box = document.getElementById('drop-area'); //拖拽区域
box.addEventListener("drop",function(e){
    e.preventDefault(); //取消默认浏览器拖拽效果
    var fileList = e.dataTransfer.files; //获取文件对象
    if(showFile(fileList)){
        //上传
        xhr = new XMLHttpRequest();
        xhr.open("post", "upload.php", true);
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        var fd = new FormData();
        fd.append('mypic', fileList[0]);
        xhr.send(fd);
    }
},false);