javascript - 如何清空input file中的文件
本文介绍了javascript - 如何清空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中的文件以后上传第二章(暂不考虑多文件添加)
解决方案
在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 () {
....
};
})
这篇关于javascript - 如何清空input file中的文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文