首页 > 开发 > HTML > 正文

如何清空input file中的文件

2017-09-09 13:19:29  来源: 网友分享

如何清空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 () {                ....                     };        })