正文 

当前位置： 首页 > java > java教程

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

AaronHuang AaronHuang     2022-08-28     673

关键词：

很早以前 在杭州银行工作曾经碰到这么一个需求，当时也是纠结了很久，也是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" 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;
     }
 }
 
页面内容来至网络转载

javascript图片的上传前预览（兼容所有浏览器）

...sp;实现图片的本地预览（无需上传至服务器），兼容所有浏览器（IE6&IE6+、Chrome、Firefox）。 实现要点 ● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。● 对于 IE6~9  查看详情

原生js上传加预览兼容ie

前提条件：ie浏览器模式下，用户要允许ie默认的加载项；以下兼容ie的方法才会生效***********************************************************************/*图片上传预览IE是用了滤镜*/functionpreviewImage(file){varMAXWIDTH=60;varMAXHEIGHT=60;vardiv=docume 查看详情

3种上传图片并实现预览的方法

...方法一很明显，浪费流量和服务器资源；方法二则加重了浏览器的负担，并且对浏览器的兼容性要求更高（在某些低版本中的IE浏览器不支持）。以下 查看详情

jquery图片上传前先在本地预览（不经过后端处理）

...反而是C:fakepatha.jpg，这个路径是错误的。百度之后得到说浏览器基于保护用户的相关安全措施，隐藏了上传的真实路径，用fakepath代替，当然，调整浏览器的相关安全设置可以解决这个 查看详情

ie浏览器上传图片预览兼容（ie7891011）

$("#file_upload").change(function(){var$file=$(this);varfileObj=$file[0];varwindowURL=window.URL||window.webkitURL;vardataURL;var$img=$("#preview");if(fileObj&&fileObj.files&&fileObj.f 查看详情

图片上传后即时预览

<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>//设置图片上传后预览的div样式<styletype="text/css">#preview,.img,img{width:200px;height:200 查看详情

js上传图片本地预览缓存

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>文件上传</title><scriptsrc="jQuery.js"></script><styletype="text/css">#file{display:block;width: 查看详情

jquery实现图片预览

...11月26日*介绍:基于JQUERY扩展,图片上传预览插件目前兼容浏览器(IE谷歌火狐)不支持safari*插件网站:http://keleyi.com/keleyi/phtml/image/16.htm*参数说明:Im 查看详情

图片上传预览

例1：1.先创建一个file表单域，我们需要用它来浏览本地文件。<formname="form1"id="form1"method="post"action="upload.php"><inputtype="file"name="file1"id="file1"/></form>2.试下效果：　判断文件类型：当用户选择了一个图片文件时，希望他... 查看详情

html5上传本地图片,在线预览及裁剪(filereader,canvas)

...览一下，使用filereader方法无需和后台交互，代码如下：//本地图片在上传之前的预览效果//图片上传预览functionpreviewImage(file){if(file.files&&file.files[0]){varimg=document.getElementById(‘imghead‘);varreader=newFi 查看详情

使用input标签解决本地图片预览的问题(代码片段)

...端项目），就是在反馈页面点击上传图片的时候，实现在本地读取照片并预览的效果，这样的实现效果可以避开把图片上传到服务器在预览的尴尬，具体的页面展示效果如下：具体的代码如下（偷个懒，也为了大家看的更方便，... 查看详情

图片上传组件开发(代码片段)

...。预览图片用户使用：用户点击“选择图片”，弹出文件浏览器，可以选择本地的图片，点击确认后，所选图片会按照原始比例出现在页面的浏览区域中。组件调用：开发者可以自己定义图片预览区域的大小，并限定所传图片的... 查看详情

js实现图片上传本地预览

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv=" 查看详情

图片上传预览(代码片段)

...内的第一个文件vara=event.target.files[0];//取文件的路径注意浏览器的保密协议varurl=window.URL.createObjectURL(a);//上传图片后让图片显示到上传框$("#upimg").css(‘background‘,‘url(‘+url+‘)0%0%/cover‘)添加onchange方法后在上传图片时 选取... 查看详情

图片上传前的预览（php）

1.先创建一个file表单域，我们需要用它来浏览本地文件。<formname="form1"id="form1"method="post"action="upload.php"><inputtype="file"name="file1"id="file1"/></form>2.试下效果：　判断文件类型：当用户选择了一个图片文件时，希望他能马... 查看详情

前端图片预览，上传前预览，兼容ie7891011，firefox，chrome

在现在的Web开发中不可避免的会做一个图片预览的功能，比如在上传图片的情况下，一个很简单的办法就是讲图片上传至服务器之后，再将文件的URL返回回来，然后异步通过这个URL加载刚刚上传的图片，实现图片的预览，很明显... 查看详情

uniapp上传图片至服务器，获得在线图片链接预览（实战）

...图片进行处理，返回给前端一个服务器链接在线图片，在浏览器就可以打开链接访问的那种。然后前端将这个图片链接渲染在页面进行预览。首先我们看一下uniapp的官方文档：https://uniapp.dcloud.io/api/media/image?id=chooseimage大概是这... 查看详情

前端实现input[type='file']上传图片预览效果

...周知JavaScript在设计上处于安全角度考虑，是不允许读写本地文件的（原因请自行百度）；但是在实际项目应用中，经常会使用到上传图片，并且可以让用户直接预览图片。对于此种做法有两种方法可以实现：一是前后台交互，... 查看详情