如何清空input file中的文件

如何清空input file中的文件

<div class="pic-box">
    <input type="file" id="upload" accept="image" @change="upload">
    <label for="upload"></label>
    <span class="add icon-plus"></span>
</div>

需要每上传一张图片将图片放在一个数组里面,但是原来的值中有文件。现在需要清空file中的文件以后上传第二章(暂不考虑多文件添加)

回复
阅读 32.2k
5 个回答

在input的change事件回调中把input的value清空即可

typeof $ === "function" && $("#" + id).change(function () {
            var reader = new FileReader();
            //读取文件以数据URI的形式保存在reader的result属性中
            reader.readAsDataURL(this.files[0]);
            //获取图片大小,以M为单位
            var fileSize = Math.round(this.files[0].size / 1024 / 1024);
            //获取图片大小,以KB为单位
            var fileSizeKB = Math.round(this.files[0].size / 1024);
            //获取到图片后把input框内的图片删除,这样选同一张图片上传时才会触发change事件
            $(this).val("");
            //上传图片的尺寸必需大于200KB
//          if (fileSizeKB < 200) {
//              return that.alert("请上传尺寸大于200KB的图片!");
//          }
            //在图片读取完之前显示loading,因为手机上图片读取和压缩可能会比较耗时
            that.loading("show");
            reader.onload = function () {
                ....         
            };
        })
var clearInputFile = function(f) {         
    try{  
        f.value = '';   
        if(f.value){ 
            f.type = "text";  
            f.type = "file";     
        }                                       
    }catch(e){}
};

js 不能操作 input[type=file]
你可以将这个 input 的 dom 元素删除掉,再新增一个

var input = document.getElementById("upload");
input.value='';

新手上路,请多包涵
$('input').val('')
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏