jQuery上传文件， 重复上传时不显示的解决办法

在写上传文件时遇到一个头疼的问题：当只上传一个图片时，如果删除图片后，再重新上传相同名称的图片，上传列表中将不会显示新上传的图片。解决办法，用 $(’#choose-file’).val(’’); 清空数据，来解决问题，下面是完整代码

css:

.add_div{width:400px;height:500px;border:solid #ccc 1px;margin-top:40px;margin-left:170px;padding-left:20px}
.file-list{height:125px;display:none;list-style-type:none}
.file-list img{max-width:70px;vertical-align:middle}
.file-list .file-item{margin-bottom:10px;float:left;margin-left:20px}
.file-list .file-item .file-del{display:block;margin-left:20px;margin-top:5px;cursor:pointer}
.z_file { width:100px;  height: 30px; border: 1px #ccc solid; position:relative; display:inline-block; background:#EBEAEC }
.z_file:after{content:'选择文件'; position:absolute; left:0; top:0; width:100%; height:30px; text-align:center; line-height:30px; font-size:14px; color:#666}
.z_file input::-webkit-file-upload-button {width: 100px; height:30px;  border: none;   position: absolute; top:0; left:0; outline: 0; opacity: 0; z-index:1  }

html 代码

<div class="add_div">
    <p><span>名称：</span><input type="text" name="" id="name" value=""/></p>
    <p><span>图片：</span><b class="z_file"> <input type="file" name="" id="choose-file" multiple/></b></p>
    <p><ul class="file-list "></ul> </p>
    <button style="cursor: pointer;margin-left: 150px;" href="javascript:;" id="upload">上传</button>
</div>

jq代码

 $(function () {
        //声明变量
        var $button = $('#upload'),
            //选择文件按钮
            $file = $("#choose-file"),
            //回显的列表
            $list = $('.file-list'),
            //选择要上传的所有文件
            fileList = [];
        //当前选择上传的文件
        var curFile;
        // 选择按钮change事件，实例化fileReader,调它的readAsDataURL并把原生File对象传给它，
        $file.on('change', function (e) {
            //上传过图片后再次上传时限值数量
            var numold = $('li').length;
            if(numold >= 3){
               alert('最多上传3张图片');
                return;
            }
            //限制单次批量上传的数量
            var num = e.target.files.length;
            var numall = numold + num;
            if(num >3 ){
                alert('最多上传3张图片');
                return;
            }else if(numall > 3){
               alert('最多上传3张图片');
                return;
            }
            //原生的文件对象，相当于$file.get(0).files;//files[0]为第一张图片的信息;
            curFile = this.files;
            //将FileList对象变成数组
            fileList = fileList.concat(Array.from(curFile));          
            for (var i = 0, len = curFile.length; i < len; i++) {
                reviewFile(curFile[i])
            }
            $('.file-list').fadeIn(500);
        })
        function reviewFile(file) {
            //实例化fileReader,
            var fd = new FileReader();
            //获取当前选择文件的类型
            var fileType = file.type;
            //调它的readAsDataURL并把原生File对象传给它，
            fd.readAsDataURL(file);//base64
            //监听它的onload事件，load完读取的结果就在它的result属性里了
            fd.onload = function () {
                if (/^image\/[jpeg|png|jpg|gif]/.test(fileType)) {
                    $list.append('<li style="border:solid red px; margin:5px 5px;" class="file-item"><img src="' + this.result + '" alt="" height="70"><span class="file-del">删除</span></li>').children(':last').hide().fadeIn(500);
                } else {
                    $list.append('<li class="file-item"><span class="file-name">' + file.name + '</span><span class="file-del">删除</span></li>')
                }

            }
        }

        //点击删除按钮事件：
        $(".file-list").on('click', '.file-del', function () {
            let $parent = $(this).parent();
            console.log($parent);
            let index = $parent.index();
            fileList.splice(index, 1);			
            $parent.fadeOut(500, function () {
                $parent.remove()
            });
			$('#choose-file').val('');
       });
        //点击上传按钮事件：
        $button.on('click', function () {
            var name = $('#name').val();
            if (name == '') {
               alert('请输入商品名称');
                return;
            }

            if(fileList.length > 3){
                alert('最多允许上传3张图片');
                return;
            } else {
                var formData = new FormData();
                for (var i = 0, len = fileList.length; i < len; i++) {
                    console.log(fileList[i]);
                    formData.append('upfile[]', fileList[i]);
                }
                formData.append('name', name);
                $.ajax({
                    url: './product_add.php',
                    type: 'post',
                    data: formData,
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function (data) {
						console.log(data.status)
                       
                    }
                })
            }
        })
    })