JavaScript实现本地图片上传预览功能（兼容IE、chrome、FF）-白红宇

JavaScript实现本地图片上传预览功能（兼容IE、chrome、FF）

阅读量：4960 次

发布时间：2019-06-12

本文共 4238 字，大约阅读时间需要 14 分钟。

需要解决的问题有：本地图片如何在上传前预览、编辑；

最近发现这个功能很多是基于flash实现的，很多JavaScript实现的代码兼容性都很差，特别是在IE和firefox和chrome三个浏览器上不兼容。

代码实现主要利用到jquery插件imgAreaSelect，FileReader对象（chrome和ff获取本地图片数据的接口），IE滤镜效果。

关键词：imgAreaSelect FileReaderdocument.selection.createRange() IE滤镜效果

一、实现上传前预览

1.1、页面显示

代码1-1显示的是html需要展示的web页面信息

                  01          <!—预览图片显示区域-->         
       
                  02          <div id=”image_area”>         
       
                  03          <img id="biuuu"src="#" title="biuuu">         
       
                  04          </div>         
       
                  05          <!—图片上传区域-->         
       
                  06          <div id =”upload_area”>         
       
                  07          <form name = "form1"action =' /person?c=changeAtvatar' enctype = 'multipart/form-data'method = 'POST'>         
       
                  08          <input type="file"id="picpath" name="atvatar_image">         
       
                  09          <a href="javascript:void(0);"class="button"> 上传照片</a>         
       
                  10          <input type='text'name="path" readonly>         
       
                  11          <div id = “submit_button”>         
       
                  12          <a href="javascript:void(0);"class='button'>确认</a>         
       
                  13          </div>

代码1-1

为了修改input file的按钮名称，我们添加了一段代码，这个在第二节将会详细说明

                  1          <a href="javascript:void(0);" class="button">上传照片</a>         
       
                  2          <input type='text'name="path" readonly>

1.2、实现预览在线编辑

这里我们主要使用了一个插件进行图片编辑，如果需要具体查看学习可查看网址

，使用方法还是很简单方便的。

                  01          $('#biuuu').imgAreaSelect({ 
         
                  02          aspectRatio:'1:1', //截取比例         
       
                  03          show:true,         
       
                  04          resizable:true, //是否可调整大小         
       
                  05          autoHide: false,//选择框选择完毕是否自己取消         
       
                  06          handles:true,         
       
                  07          key:true, //是否启用键盘，默认为false         
       
                  08          //x1: 75, y1: 30, x2:225, y2: 180, //需要处理的区域，原始的         
       
                  09          //x1:左上角x轴坐标 y1:左上角y轴坐标 x2:右下角x轴坐标 y2:右下角y轴坐标         
       
                  10          keys: { arrows: 1,ctrl: 5, shift: 'resize' }, //调整像素大小         
       
                  11          //onInit:function(img, selection) { ias.setSelection(100, 50, 250, 150, true);ias.update(); }, //设置初始函数 画出选择框         
       
                  12          onSelectChange:preview //选框移动时触发的事件         
       
                  13          //onSelectEnd:function(img, select){alert(select.width)} //选框结束时触发的事件         
       
                  14          });

代码1-2

代码1-2主要是设置需要编辑图片的一些插件属性，具体查看插件的参量说明。

首先我们需要创建一个预览小图片在img之后

                  1          $('<div><imgid="view" src='+atvatarUrl+' style="position: relative;"/></div>')         
       
                  2          .css({ 
         
                  3          float: 'left',         
       
                  4          position:'relative',         
       
                  5          overflow:'hidden',         
       
                  6          width: '100px',         
       
                  7          height: '100px'         
       
                  8          }).insertAfter('#biuuu');//把新建元素放到 #biuuu 之后

代码1-3

代码1-3是创建一个小预览图片在img之后

1.3、实现在线预览功能

                  01          function previewImage(file)         
       
                  02          { 
         
                  03          var porImg = $('#biuuu'),//首先获取大图片jquery对象         
       
                  04          viewImg = $('#view');//小图片jquery对象         
       
                  05          //判断该浏览器是否为w3c标准，既非IE浏览器         
       
                  06          if (file["files"] && file["files"][0])         
       
                  07          { 
         
                  08          //使用JavaScript的FileReader对象来读取本地数据，并且将数据结果赋值给image的src，具体该对象如何实现的还未深入研究         
       
                  09          var reader = newFileReader();         
       
                  10          reader.onload =function(evt){ 
         
                  11          porImg.attr({src :evt.target.result});         
       
                  12          viewImg.attr({src: evt.target.result});         
       
                  13          }         
       
                  14          reader.readAsDataURL(file.files[0]);         
       
                  15          }         
       
                  16                    
       
                  17          function previewImage(file)         
       
                  18          { 
         
                  19          var porImg = $('#biuuu'),//首先获取大图片jquery对象         
       
                  20          viewImg = $('#view');//小图片jquery对象         
       
                  21          //判断该浏览器是否为w3c标准，既非IE浏览器         
       
                  22          if (file["files"] && file["files"][0])         
       
                  23          { 
         
                  24          //使用JavaScript的FileReader对象来读取本地数据，并且将数据结果赋值给image的src，具体该对象如何实现的还未深入研究         
       
                  25          var reader = newFileReader();         
       
                  26          reader.onload =function(evt){ 
         
                  27          porImg.attr({src :evt.target.result});         
       
                  28          viewImg.attr({src: evt.target.result});         
       
                  29          }         
       
                  30          reader.readAsDataURL(file.files[0]);         
       
                  31          }         
       
                  32          //如果是IE浏览器，采用滤镜效果，进行显示，但特别注意的是该滤镜效果使用的对象是div对象，并非img对象，因此我们需要将原有的img对象remove同时生成新的div对象，并且赋值相应的class和id         
       
                  33          else         
       
                  34          { 
         
                  35          //创建需要滤镜显示的div的dom对象         
       
                  36          var ieImageDom =document.createElement("div");         
       
                  37          var proIeImageDom =document.createElement("div");         
       
                  38          //设置对象的css属性和原有的img对象属性相同，添加相应的id属性值         
       
                  39          $(ieImageDom).css({ 
         
                  40          float: 'left',         
       
                  41          position:'relative',         
       
                  42          overflow:'hidden',         
       
                  43          width: '100px',         
       
                  44          height: '100px'         
       
                  45          }).attr({ 
"id":"view"});         
       
                  46          $(proIeImageDom).attr({ 
"id":"biuuu"});         
       
                  47          //删除原有img对象，append创建div的dom对象         
       
                  48          porImg.parent().prepend(proIeImageDom);         
       
                  49          porImg.remove();         
       
                  50          viewImg.parent().append(ieImageDom);         
       
                  51          viewImg.remove();         
       
                  52          //采用滤镜效果生成图片预览         
       
                  53          file.select();         
       
                  54          path =document.selection.createRange().text;         
       
                  55          $(ieImageDom).css({ 
"filter":"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ path + "\")"});         
       
                  56          $(proIeImageDom).css({ 
"filter":"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ path + "\")"});         
       
                  57          // .style.filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ path + "\")";//使用滤镜效果         
       
                  58          }