实现上传预览

上传文件实现预览

上一周,写一个微信公众号的项目,页面中有一个需求,是用户上传文件,并且实现预览。其实如果是微信的页面上传文件的话,应该用微信提供的api。但是,目前的阶段,是初版用于演示,所以就随意了。开发时候用的是vue+vux+vue-router,但是对于这种知识点,我觉得还是回到最原始的原生js,然后通过这种方式,真的了解了,那么我们才是真的可以灵活地运用在各种框架上。

HTML5 FileApi

我们用的就是H5中的FileApi,目前的兼容性来看,不能说没有问题,但总体看来是非常乐观的。

不说那么多的废话,直接看代码,还是非常简短的。

<code class="language-html">&lt;input type="file" name="file" id="upload" /&gt;
&lt;img src="" alt="" id="preview"&gt;
</code>
<code class="language-js">var oFile = document.getElementById('upload');
    oFile.onchange = function(e) {
        var file = e.target.files[0];
        console.log(file);
        var reader = new FileReader();
        reader.onloadstart = function(e) {
            console.log("开始读取....");
            console.log(e)
        }
        reader.onprogress = function(e) {
            console.log("正在读取中....");
            console.log(e)
        }
        reader.onabort = function(e) {
            console.log("中断读取....");
            console.log(e)
        }
        reader.onerror = function(e) {
            console.log("读取异常....");
            console.log(e)
        }
        reader.onload = function(e) {
            console.log("成功读取....");
            console.log(e)
            var img = document.getElementById("preview");
            img.src = e.target.result;
            //或者 img.src = this.result;  //e.target == this
        }
        reader.readAsDataURL(file)
    }
</code>

总结一下:

  1. 怎么获取到当前上传的文件?在input type=file的input上绑定onchange事件,通过e.target.files[0]来获取到当前的文件。var file = e.target.files[0]
  2. new一个FileReader,var reader = new FileReader();,然后 reader.readAsDataURL(file);
  3. 在上传的过程中有这么几个事件。分别是,onloadstart,onlprogress,onabort,onerror,onload
  4. 一般我们在onload事件中获取到图片的base64地址,然后让imgsrc属性等于这个base64地址。

至此,我们每次上传的图片都可以实现预览。

每天都比过过去的自己更完美

发表评论

电子邮件地址不会被公开。 必填项已用*标注