<input type="file">取消选择时如何保留上次选择的文件

Question

第一次选择文件后，再次点击按钮，弹框后不选择文件而是选择取消，第一次选择的文件也没了。。。显示未选择任何文件

Answer 1

你如果有特殊需要可以用个临时变量来保存上一次操作的值，就比如说,文件选择事件触发后

var prevFile = null;

fileElement.onchange = function(){
    var file = fileElement.files[0] || prevFile;
    if(!file) return false;
    
    ///此处省略一大段逻辑///
    prevFile = file;
};

Answer 2

试试这个吧 https://stackoverflow.com/que...

Answer 3

楼主后来怎么解决的？？

Answer 4

可以通过点击事件，把当前input元素进行克隆，当我们进去没有选择文件的时候，把当前input元素用remove删除，在把之前克隆的input元素添加进来。这样就可以保存之前的文件了，我写的一些关键代码如下：
<div>

<label id="lblFile1" for="file1">点击添加</label>
<input type="file" id="file1">

</div>
<script src="${pageContext.request.contextPath}/statics/js/jquery-1.8.3.js"></script>
<script>

$(function () {
    $("#file1").click(function () {
        var fileClone = $("#file1").clone(true);
        var index=0;
        $("#file1").change(function () {
            if(index==0){
                index=1;
                var fileSize=$("#file1").val().length;
                if (fileSize==0){
                    $("#file1").remove();
                    $("#lblFile1").after(fileClone);
                }
            }
        });
    })
})

</script>
（注意：通过index做标记，让change只执行一次，因为克隆的元素id是一样的，所以会产生多次change事件）