js实现图片预览的几种方式

   考虑到用户体验， 网页的图片上传数据库前，先预览是很有必要的一个步骤，第一可以给用户带来安全感，第二防止图片文件有问题而提交到数据库，占用存储资源。

那么要实现预览有两种方式：一种是用window.URL.createObjectURl方法对选择的图片数据（图片数据可以勉强理解为input的value）生成一个blob对象路径，第二种是用获取 FileReader读取器。

那么无论那种方法，首先都得得到文件数据，获得文件数据是从files集合中获取。

方式一：

代码如下：

<input type=file id="inp">

<script>

   inp.onchange=function(){

        var file=this.files[0]   // 获取input上传的图片数据;

        var img=new Image()  ;

        url=window.URL.createObjectURL(file)  // 得到bolb对象路径，可当成普通的文件路径一样使用，赋值给src;

        img.src=url;

        //其实也可一句代码搞定，不需要声明那么多变量；img.scr=window.URL.cteateObejectURL(this.files[0]) ;

        然后把img添加到页面就实现预览了

   }

<script>

方式二：

用FileRader对像读取文件.可分为四步；1、创建FileReader对像；2、调用readAsDataURL方法读取文件；3、调用onload事件监听，我们一需要拿到完整的数据，但我们又不知道文件何时读完？，所以需要第三步监听；4、通过FileRader对像r的result属性拿到读取结果。

代码如下：

<input type=file id="inp">

<input type=file id="inp">

<script>

inp.onchange=function(){

       var read=new FileReader() // 创建FileReader对像;

  read.readAsDataURL(this.files[0])  // 调用readAsDataURL方法读取文件;

           read.onload=function(){

                    url=read.result  // 拿到读取结果;

                    var img=new Image();

                    img.src=url;

                    div.appendChild(img);
  }
   }

OK　到这就完了。。。。。。。。。。。。。。。