js图片上传前预览功能（兼容所有浏览器）

网上找到的一份文件上传前预览的代码,转自JavaScript 图片的上传前预览（兼容所有浏览器）

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <style type="text/css">
  #preview,
  .img,
  img {
    width: 200px;
    height: 200px;
  }

  #preview {
    border: 1px solid #000;
  }
  </style>
</head>

<body>
  <div id="preview"></div>
  <input type="file" onchange="preview(this)" />
  <script type="text/javascript">
  function preview(file) {
    var prevDiv = document.getElementById('preview');
    if (file.files && file.files[0]) {
      var reader = new FileReader();
      reader.onload = function(evt) {
        prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
      }
      reader.readAsDataURL(file.files[0]);
    } else {
      prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
    }
  }
  </script>
</body>
</html>

实现要点 
● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。 
● 对于 IE6~9 使用滤镜 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 来实现。
测试了一下IE8+都没有问题。但是IE7下file.value被浏览器去掉了文件路径分割线从而显示不出来

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 兼容IE和FF的图片上传前预览js代码

    兼容IE和FF的图片上传前预览js代码

    效果图如下:  代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta

  • js HTML5多图片上传及预览实例解析（不含前端的文件分割）

    本文实例为大家分享了js HTML5多图片上传及预览实例,供大家参考,具体内容如下 主要运用  1.HTML5 files可以选择多文件,以及获取多文件信息  2.XMLHTTPRequest对象,发送HTTP传输请求  3.将每一个文件放在FormData,进行传输  4.利用readAsDataURL将图片内容直接变成url,放在img标签的src当中,生成可预览的图片 html+css+js代码 <!DOCTYPE html> <head> <meta http-equ

  • javascript 图片上传预览-兼容标准

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • Javascript图片上传前的本地预览实例

    图片的上传预览功能主要用于图片上传前的一个效果的预览,目前主流的方法主要有js,jquery与flash实现,但我们一般都会使用js来实现图片上传预览功能,下面来看一个例子. 原理: 分为两步:当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL):把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来. 在这里,我们需要了解Javascript里File对象.Blob对象和window.URL.createObjectURL()方法. Fil

  • JS实现图片上传预览功能

    废话不多说了,直接给大家贴js代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> </head> <body&g

  • 图片上传之前检查大小、尺寸、格式并预览的js代码

    下面的代码,需要保存到本地种执行,在线看不到实际效果. validate before upload by Lance Zhang File type :gif,jpg,jpeg,png,bmp File Size limit: K Image Height Limit: Image Width Limit: Image Preview function CheckFileSize() { var limit = document.getElementById("fileSizeLimit&qu

  • js图片上传前预览功能（兼容所有浏览器）

    网上找到的一份文件上传前预览的代码,转自JavaScript 图片的上传前预览(兼容所有浏览器) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> #preview, .img, img { w

  • vue.js 图片上传并预览及图片更换功能的实现代码

    这里讲解是图片上传和图片预览.主要是围绕我们常用功能的列子做讲解 ,并且没有格外引入其他js 所以你复制过去做简单修改便可以看到效果 效果图: 样式以及效果图一并展示 1.HTML <div class="rz-picter"> <img :src="avatar" class="img-avatar"> <input type="file" name="avatar" id=

  • jQuery+HTML5实现图片上传前预览效果

    jQuery+HTML5实现图片上传前预览效果

    本文实例讲述了jQuery+HTML5实现图片上传前预览效果.分享给大家供大家参考.具体如下: 这里主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能.请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-html5-pic-upload-pre-view-c

  • ThinkPHP5+Layui实现图片上传加预览功能

    html代码 <div class="layui-upload"> <button type="button" class="layui-btn" id="cover">上传封面</button> </div> <div class="layui-input-inline"> <img id="preview" width

  • Ajax实现图片上传并预览功能

    先给大家展示下效果图,大家感觉不错,请参考实现代码. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 <input type='file' name='pic'> 当我们点击表单的时候提示选择需要上传的图片.但是此需求我们分析一下,可以在点击图片的时候使用JS实现预览功能,并且楼主也是这样做的.代码如下: function getFileUrl(source

  • ASP.NET MVC图片上传前预览简单实现

    ASP.NET MVC图片上传前预览简单实现

    本文实例为大家分享了图片上传前预览并获取图片文件名和图片字节大小的具体实现代码,供大家参考,具体内容如下 在控制器中创建一个Action: 在Views目录下对应的控制器名称下创建视图PreViewing: 上图中 标记1,引用jQuery类库. 标记2,选择文件. 标记3,预览图片. 标记4,显示图片文件名和图片字节大小. 标记5,是Javascript代码...... 本例预览: 以上就是本文的全部内容,希望对大家的学习有所帮助.

  • AngularJS实现图片上传和预览功能的方法分析

    本文实例讲述了AngularJS实现图片上传和预览功能的方法.分享给大家供大家参考,具体如下: html5原生方法 先看一下html5原生方法上传和预览图片的实现: // <img id="img-preview"> var imgPreview = document.getElementById("img-preview"); // <input id="img-input" type="file">

  • js实现图片上传并预览功能

    本文为大家分享了js实现图片上传并预览的具体代码,供大家参考,具体内容如下 思路:完成这个功能,首先需要美化上传图片的按钮,然后添加一个<img/>标签,在图片上传之后,用新图片的src替换原来<img/>标签中的src. 如下图所示,是原始的按钮样式: 美化步骤: (1)将上传图片标签采用绝对定位,使之位于一个图片,按钮,div等标签上.或者给图片,按钮或div设置绝对定位,总之,是要让上传文件按钮和用户指定的按钮重合. (2)给上传图片标签设置大大小,使之和与它重叠的图片,按钮

  • 基于jquery实现图片上传本地预览功能

    当我们在上传文件时如果每次都要上传到服务器才可以预览这个做看上合理其实是不合理的,如果网速慢或图片有问题,这样不但浪费客户时间同时也浪费服务器资源了,下面我们介绍利用js上传图片时本地实现预览,希望此方法对各位有所帮助哦. 一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL): 把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来. 在这里,我们需要了解Javascript里File对象.Blob对象和window.U

  • jquery实现兼容浏览器的图片上传本地预览功能

    一.图片上传实现本地预览 由于上传图片功能,现在大多数都需要在本地实现预览,为了能够更好的让用户体验到效果,实现成品的证明,需要兼容好几种浏览器,所有通过各个例子整合了这个例子插件,兼容火狐.谷歌.ie8,其他的没有进行测试过 复制代码 代码如下: (function($){ jQuery.fn.extend({ uploadPreview: function(opts){ opts = jQuery.extend({ width: 0, height: 0, imgPreview: null,

随机推荐