js 清空 input file 的值的方法

今天在做一个利用 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>