上传同一个文件change事件不会重复触发问题

一、前言

功能：可上多个文件，选择框下面显示已经选择的文件，可删除已选择的文件，图片类型可预览。
遇到问题：选择同一个文件change事件不会触发
解决：change事件后，用一个新的input file替换原来的Input file

二、效果

三、代码

页面

<form>

    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>

    </div>
</form>
<div class="media">
    <div class="media-left">
        <!--<a href="#">
            <img class="media-object" src="..." alt="...">
        </a>-->
    </div>
    <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
        ...
    </div>
</div>

js

<script>
    $(function () {
        var files=[]
        //change事件要用委托
        $(".form-group").on('change','#exampleInputFile',function (e) {

            if(!e){
                return;
            }
            var $inputfile = '<input type="file" id="exampleInputFile">';
            //替换原来的input file ,避免在删除这个文件后，重复选时不能选
            $(this).replaceWith($inputfile)
            var file = e.target.files; //获取图片资源

            var img ="";
            if (files.length <= 0) {
                files.push(file);
            } else {
                var bool = false;
                for (var i = 0; i < files.length; i++) {
                    if (file[0].name === files[i][0].name) {
                        bool = true;
                        break;
                    }
                }
                if (!bool) {
                    files.push(file);
                }
            }
            $.each(files, function (index, fileItem) {
                if (fileItem[0].type.match('image.*')) {
                    var reader = new FileReader();
                    reader.readAsDataURL(fileItem[0]); // 读取文件
                    // 渲染文件
                    reader.onload = function (args) {
                        img += "<li><div ><img height='100' width='100' class='preview' src='" + args.currentTarget.result + "' /><span>" + fileItem[0].name + "</span></div>" +
                            "<div class='dele'>删除</div></li>";
                        $(".media-left").html(img);
                    }
                } else {
                    img += "<li><div ><img height='100' width='100' /><span>" + fileItem[0].name + "</span></div>" +
                        "<div class='dele'>删除</div></li>";
                }
            });
            console.log(img)
            $(".media-left").html(img);
        })


        //删除文件
        $('.media-left').on('click', '.dele', function (e) {
            var fileName = $(this).parent().find('span').text();
            for (var i = 0; i < files.length; i++) {
                if (files[i][0].name === fileName) {
                    files.splice(i, 1);
                    e.currentTarget.parentNode.remove();
                }
            }
        });
    })

</script>