JS兼容各个浏览器的本地图片上传即时预览效果

很早之前 在杭州银行工做曾经碰到这么一个需求，当时也是纠结了好久，也是google了好久，没有碰到合适的demo，今天特地研究了下这方面的的问题，因此也就作了个简单的demo来实现 本地上传图片即时预览效果。其在标准浏览器(firefox,chrome，IE10等其余浏览器)用了HTML5中的内容实现图片即时预览效果。在IE10如下浏览器用了滤镜来解决图片显示问题。在看代码以前，先让咱们来了解如下知识点：

 

HTML5中的FileReader对象： FileReader对象主要是把文件读入内存中，而且读取文件中数据。目前为止，firefox3.6+ chrome6+ Safari5.2+ Opera11+及IE10浏览器支持FileReader对象。它有如下5种方法：

 

1. readBinaryString 

 

2. readAsText

 

3. readAsDataURL  将对象或文件中的数据读取为一串DataURL字符串，就是将数据以一种特殊格式的URL地址形式直接读入页面。

 

4. readAsArrayBuffer

 

 5. abort.

 

而咱们如今要用的是第三种，因此解释了下，其余的具体能够看相关的资料，这里很少解释。

 

IE：document.selection    即资料解释以下：

 

      selection   对象 表明了当前激活选中区，即高亮文本块，和/或文档中用户可执行某些操做的其它元素。  

      selection   对象的典型用途是做为用户的输入，以便识别正在对文档的哪一部分正在处理，或者做为某一操做的结果输出给用户。 

 

          用户和脚本均可以建立选中区。用户建立选中区的办法是拖曳文档的一部分。脚本建立选中区的办法是在文本区域或相似对象上调用   select   方法。要获取当前选中区，请对   document   对象应用   selection   关键字。要对选中区执行操做，请先用   createRange   方法从选中区建立一个文本区域对象。  

          一个文档同一时间只能有一个选中区。选中区的类型决定了其中为空或者包含文本和/或元素块。尽管空的选中区不包含任何内容，你仍然能够用它做为文档中的位置标志。

 

下面是JSFiddle 中的DEMO连接以下：

 

 想要查看效果，请点击我！

 

下面是HTML代码以下：

 

复制代码

<form enctype="multipart/form-data" name="form1">

    <input id="f" type="file" name="f" onchange="change()" />

    <div class="upload">上传图片</div>

    <p>预览:</p>

    <p>

        <img id="preview" alt="" name="pic" />

    </p>

</form>

复制代码

JS代码以下：

 

复制代码

function change() {

    var pic = document.getElementById("preview"),

        file = document.getElementById("f");

 

    var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();

 

     // gif在IE浏览器暂时没法显示

     if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){

         alert("图片的格式必须为png或者jpg或者jpeg格式！"); 

         return;

     }

     var isIE = navigator.userAgent.match(/MSIE/)!= null,

         isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null;

 

     if(isIE) {

        file.select();

        var reallocalpath = document.selection.createRange().text;

 

        // IE6浏览器设置img的src为本地路径能够直接显示图片

         if (isIE6) {

            pic.src = reallocalpath;

         }else {

            // 非IE6版本的IE因为安全问题直接设置img的src没法显示本地图片，可是能够经过滤镜来实现

             pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";

             // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片

             pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';

         }

     }else {

        html5Reader(file);

     }

}

 

 function html5Reader(file){

     var file = file.files[0];

     var reader = new FileReader();

     reader.readAsDataURL(file);

     reader.onload = function(e){

         var pic = document.getElementById("preview");

         pic.src=this.result;

     }

 }

 

页面内容来至网络转载