html5 手机端异步上传预览图片（文件） FileReader对象

原文发布：点击查看全文http://www.3qphp.com/php/code/2.html

原文发布网站： 
谷谷点       html5 手机端异步上传预览图片（文件） FileReader对象|谷谷点

一、以前web页面上传以及展示图片原理说明

        1.    form表单选择图片 ——> 通过php上传存储在服务器端 ——> 服务器返回图片的url给前端页面 ——> 通过url前台展示图片（预览）

        2.    如果预览之后不满意，就按照上面的流程重新上传修改预览

二、html5出现之后使用javascript实现FileReade接口

        说明：在html5范围之内，通过FileReade接口可以直接先预览图片，然后通过php上传存储在服务器

        FileReader接口原理： 通过FileReader，可以异步地将本地图片文件加载到本地内存，然后赋予某个javascript变量。然后调用FileReader的readAsDataURL方法，通过将图片数据读取成Data URL的方法，将图片展示出来。

        html5中：

                  1.    通过一个file input选择一个图片文件例如：<input type="file" id="file_input" />

        javascript中：

        1.    获取file对象var file = this.files[0]; 

        2.    判读文件类型是否图片file.type

        3.    实例化FileReader      var reader = new FileReader();

        4.    readAsDataURL方法读取图像文件  reader.readerAsDataURL(file);

        5.    通过this.result输出到显示位置：result.innerHTML = '<img src="'+this.result+'" alt=""/>' 

    上面把大概的流程梳理了一下让大家有个基本概念，具体使用时可能还要配合一些js事件比如：onload事件等

三、实例

    下面代码已经测试没问题，如果自己使用出现问题就注意一下路劲等参数

    测试环境：goole chrome、微信、android浏览器、iphone浏览器

    html内容：