H5实现上传文件并即时预览

此处上传一张图片为例子。

当我们用<img src="../images/l1.jpg">直接展示时，src请求的是外部文件，一般来说是服务器资源。意味着它需要向服务器发送请求，它占用服务器资源。

现在H5提供了一种文件读取，如下：

<input type="file" name="myFile" id="myFile" onchange="getFileContent()">



 function getFileContent(){
        /*创建文件读取对象*/
        var reader=new FileReader();
  
        /*文件存储在file表单元素的files属性中，它是一个数组*/
        var file=document.querySelector("#myFile").files;
        /*readAsDataURL()读取文件，获取DataURL
        *没有任何的返回值:void：但是读取完文件后，它会将读取的结果存储在文件读取对象的result中
         需要传递一个参数 binary large object:文件(图片或者其它可以嵌入到文档的类型)*/
        reader.readAsDataURL(file[0]);
        /*获取数据*/
        /*FileReader提供一个完整的事件模型，用来捕获读取文件时的状态
        * onabort:读取文件中断片时触发
        * onerror:读取错误时触发
        * onload:文件读取成功完成时触发
        * onloadend:读取完成时触发，无论成功还是失败
        * onloadstart:开始读取时触发
        * onprogress:读取文件过程中持续触发*/
        reader.onload=function(){
            /*展示*/
            document.querySelector("img").src=reader.result;
        }

即时效果的实现：onchange()事件，当用户选择完图片之后就立刻进行预览的处理。

预览效果的实现：通过文件读取对象的readAsDataURL()完成。

PS:此处只写了部分代码，只是实现即时预览，如需实现效果，还需完整代码。