今天在做一个利用 JS 上传本地图片的小功能时,需要在文件上传成功后,清空 file 类型的 input 元素中所选择的本地文件,以方便二次功能的调用!而这篇文章飞鸟慕鱼博客就来说一说,如果利用 js 来清空一个 file 类型 input 元素的值。

js 清空 input file 值的方法

方法1:

直接将 input file 的值改成空字符串;

<input type="file" id="file">
<button onclick="ac()">点击我会清空上面 input 的值</button>
<script type="text/javascript">
    function ac(){
        // JS主要实现代码
        var file = document.getElementById('file');
        file.value = '';
    }
</script>

方法2:

重新初始化元素的HTML

<script type="text/javascript">
    function ac(){
        // JS主要实现代码
        var file = document.getElementById('file');
        // 这里与上面的示例不同
        // 重新初始化了test的html
        file.outerHTML = file.outerHTML; 
    }
</script>

jQ 清空 input file 值的方法

方法1:

把 input 的 dom 元素删除掉替换掉,类似上面的方法2,重新初始化元素的HTML

$("#file").replaceWith('<input id="file" type="file"/>');

方法2:

清空 input file 的值,类似上面方法1

<script type="text/javascript">
    // 有人说这种直接赋值的方法不行,个人没有测试
    $('#file').val('');
</script>