解决input file change监听文件(图片)上传事件多次触发

文件上传html代码：

<a name="uploadFile" id="uploadFile" href="javascript:;">[上传文件]</a>
<input id="myFile" name="myFile" value="上传图片" type="file" accept="application/vnd.ms-excel" style="display: none"/>

在上传文件时候，通常想要监听文件上传事件：

    /**
     * 点击上传文件，触发input type="file"
     */
     $("#uploadFile").click(function () {
        const myFile = $("#myFile")
        // 触发
        myFile.click()
        // 监听change事件 
        myFile[0].addEventListener('change', function (e) {
            var filesList = document.querySelector('#myFile').files;
            if(filesList.length==0){ //如果取消上传，则上传文件的长度为0
                console.log("没有上传任何文件");
                return;
            }else{
                //如果有文件上传，这在这里面进行
                console.log(filesList);
            }
        });

    });

但是结果一次改变，却触发多次监听：

由于file input出于安全角度，是不允许赋值的，即使是置空，虽然通过给outerHtml赋值可以清空，但仅在ie下起使用。

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

解决方法是，每次选完文件，就重建此元素，这样值自然是空的，因为clone不带值，这样就是一个全新的file input，每一次选择，自然各种正常。

    /**
     * 点击上传文件，触发input type="file"
     */
    $("#uploadFile").click(function () {
        const myFile = $("#myFile")
        // 触发
        myFile.click()
        // 监听change事件 
        myFile.unbind().change(function (e) {
            console.log(e)
        })
    });

这样每上传一次不同的文件就可以监听到一次改变，符合监听的效果：