input file读取文件

js读取 input file 文件的两种方式：

<div id="localImag">
    <img id="preview" src="" width="150" height="180" style="display: block; width: 150px; height: 180px;">
    <input type="file" name="img" id="docfile" style="width:150px;" onchange="setImagePreview();">
</div>

1.使用FileReader读取图片（转化为base64）

function setImagePreview() {
        var docObj = document.getElementById("docfile");
        var imgObjPreview = document.getElementById("preview");
        console.log(docObj.files[0])
        if (docObj.files && docObj.files[0]) {
            var reader = new FileReader();
            reader.readAsDataURL(docObj.files[0]);//发起异步请求
            reader.onload = function(){
                //读取完成后，数据保存在对象的result属性中
                // console.log(this.result)
                imgObjPreview.src=this.result
            }
        }
}

主要使用readAsDataURL去完成转换base64，如果是文档，也可以用readAsText(file,encoding)去读取。

方法

FileReader提供了如下方法：

readAsArrayBuffer(file)	按字节读取文件内容，结果用ArrayBuffer对象表示
readAsBinaryString(file)	按字节读取文件内容，结果为文件的二进制串
readAsDataURL(file)	读取文件内容，结果用data:url的字符串形式表示
readAsText(file,encoding)	按字符读取文件内容，结果用字符串形式表示
abort()	终止文件读取操作

readAsDataURL和readAsText较为常用，这里只对这两者进行说明。

2.使用 window.URL.createObjectURL 读取图片（转化为blod）(推荐)

function setImagePreview() {
        var docObj = document.getElementById("docfile");
        var imgObjPreview = document.getElementById("preview");
        console.log(docObj.files[0])
        if (docObj.files && docObj.files[0]) {
            imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
        }
}

总结

按照前辈们的说法，creatObjectURL可以有更好的性能，或许是浏览器自带接口的原因, 可以处理的更快。

而且最近做了一个需要上传图片预览的项目，用的最简单的input file上传，最开始想到的就是用filereader实现前端预览，很简单，见前面的第一段代码，在自己手机上测试，没问题。但在某些奇葩手机上，比如oppo 安卓4.3在我们app的webview内通过打开相册上传发现无法预览图片！但在该手机的微信，浏览器内上传均可以！所以推荐使用window.URL.createObjectURL

最后如果需上传，可以使用form或者使用ajax上传，form表单提交比较简单，就不介绍。

ajax提交的时候原理还是获取到obj.files[0]后。利用实例化的FormData 上传文件。如：

let fileObj = this.$refs.fileObj.files[0]; // js 获取文件对象
 var formData = new FormData();
        formData.append('file', fileObj);
        axios({
          url: process.env.URL_PATH + '/mallSealApply/uploadSealApply',
          method: 'post',
          headers: {'Authorization': this.$store.state.token},
          data: formData
        })

猜你喜欢