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


Posted in Javascript onJanuary 08, 2016

当我们在上传文件时如果每次都要上传到服务器才可以预览这个做看上合理其实是不合理的,如果网速慢或图片有问题,这样不但浪费客户时间同时也浪费服务器资源了,下面我们介绍利用js上传图片时本地实现预览,希望此方法对各位有所帮助哦。
一、原理

分为两步:

当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL);

把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来。

在这里,我们需要了解Javascript里File对象、Blob对象和window.URL.createObjectURL()方法。

1、File对象

File对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个input元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的 DataTransfer对象.

下面来看获取FileList对象:

<script type="text/javascript" src="jquery.js"></script>

<input id="upload" type="file">
<img id="preview" src="">

<script type="text/javascript">
$('#upload').change(function(){
  // 获取FileList的第一个元素
  alert(document.getelementbyid('upload').files[0]);
});
</script>

2、Blob对象

一个Blob对象就是一个包含有只读原始数据的类文件对象.Blob对象中的数据并不一定得是JavaScript中的原生形式.File接口基于Blob,继承了Blob的功能,并且扩展支持了用户计算机上的本地文件.

我们想要得到的对象URL实际上就是从Blob这个对象获取的,因为File的接口继承Blob。下面就来把Blob对象转换成URL:

<script type="text/javascript">
var f = document.getelementbyid('upload').files[0];
var src = window.URL.createObjectURL(f);
document.getElementById('preview').src = src;
</script>

一个比较完整的实例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Upload</title>
<style type="text/css">
    #destination{
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(true,sizingMethod=scale);
    }
</style>

<!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>-->
<script type="text/javascript" src="http://localhost/jQuery/jquery.js"></script>
<script type="text/javascript">
//处理file input加载的图片文件
$(document).ready(function(e) {
 //判断浏览器是否有FileReader接口
 if(typeof FileReader =='undefined')
 {
  $("#destination").css({'background':'none'}).html('亲,您的浏览器还不支持HTML5的FileReader接口,无法使用图片本地预览,请更新浏览器获得最好体验');
 //如果浏览器是ie
 if($.browser.msie===true)
 {
  //ie6直接用file input的value值本地预览
  if($.browser.version==6)
  {
    $("#imgUpload").change(function(event){   
    //ie6下怎么做图片格式判断?
    var src = event.target.value;
    //var src = document.selection.createRange().text; //选中后 selection对象就产生了 这个对象只适合ie
    var img = '<img src="'+src+'" width="200px" height="200px" />';
    $("#destination").empty().append(img);
   });
  }
  //ie7,8使用滤镜本地预览
  else if($.browser.version==7 || $.browser.version==8)
  {
  $("#imgUpload").change(function(event){
    $(event.target).select();
    var src = document.selection.createRange().text;
    var dom = document.getElementById('destination');
    //使用滤镜 成功率高
    dom.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= src;
    dom.innerHTML = '';
    //使用和ie6相同的方式 设置src为绝对路径的方式 有些图片无法显示 效果没有使用滤镜好
    /*var img = '<img src="'+src+'" width="200px" height="200px" />';
    $("#destination").empty().append(img);*/
   });
  }
 }
 //如果是不支持FileReader接口的低版本firefox 可以用getAsDataURL接口
 else if($.browser.mozilla===true)
 {
  $("#imgUpload").change(function(event){
  //firefox2.0没有event.target.files这个属性 就像ie6那样使用value值 但是firefox2.0不支持绝对路径嵌入图片 放弃firefox2.0
  //firefox3.0开始具备event.target.files这个属性 并且开始支持getAsDataURL()这个接口 一直到firefox7.0结束 不过以后都可以用HTML5的FileReader接口了
  if(event.target.files)
  {
   //console.log(event.target.files);
   for(var i=0;i<event.target.files.length;i++)
   { 
     var img = '<img src="'+event.target.files.item(i).getAsDataURL()+'" width="200px" height="200px"/>';
    $("#destination").empty().append(img);
   }
  }
  else
  {
   //console.log(event.target.value);
   //$("#imgPreview").attr({'src':event.target.value});
  }
  });
 }
 }
 else
 {
 // version 1
 /*$("#imgUpload").change(function(e){
  var file = e.target.files[0];
  var fReader = new FileReader();
  //console.log(fReader);
  //console.log(file);
  fReader.onload=(function(var_file)
  {
   return function(e)
   {
   $("#imgPreview").attr({'src':e.target.result,'alt':var_file.name});
   }
  })(file);
  fReader.readAsDataURL(file);
  });*/
  
  //单图上传 version 2 
  /*$("#imgUpload").change(function(e){
    var file = e.target.files[0];
    var reader = new FileReader(); 
  reader.onload = function(e){
   //displayImage($('bd'),e.target.result);
   //alert('load');
   $("#imgPreview").attr({'src':e.target.result});
  }
  reader.readAsDataURL(file);
   });*/
  //多图上传 input file控件里指定multiple属性 e.target是dom类型
   $("#imgUpload").change(function(e){ 
    for(var i=0;i<e.target.files.length;i++)
    {
     var file = e.target.files.item(i);
   //允许文件MIME类型 也可以在input标签中指定accept属性
   //console.log(/^image/.*$/i.test(file.type));
   if(!(/^image/.*$/i.test(file.type)))
   {
    continue;  //不是图片 就跳出这一次循环
   }
   
   //实例化FileReader API
   var freader = new FileReader();
   freader.readAsDataURL(file);
   freader.onload=function(e)
   {
    var img = '<img src="'+e.target.result+'" width="200px" height="200px"/>';
    $("#destination").empty().append(img);
   }
    }
   });
   
  //处理图片拖拽的代码
  var destDom = document.getElementById('destination');
  destDom.addEventListener('dragover',function(event){
   event.stopPropagation();
   event.preventDefault();
   },false);
   
  destDom.addEventListener('drop',function(event){
   event.stopPropagation();
   event.preventDefault();
   var img_file = event.dataTransfer.files.item(0);  //获取拖拽过来的文件信息 暂时取一个
   //console.log(event.dataTransfer.files.item(0).type);
   if(!(/^image/.*$/.test(img_file.type)))
   {
   alert('您还未拖拽任何图片过来,或者您拖拽的不是图片文件');
   return false;
   }
   fReader = new FileReader();
   fReader.readAsDataURL(img_file);
   fReader.onload = function(event){
   destDom.innerHTML='';
   destDom.innerHTML = '<img src="'+event.target.result+'" width="200px" height="200px"/>'; 
   };
  },false);
 }
});
</script>
</head>

<body>
<input type="file" id="imgUpload" name="imgUpload" draggable="true" single/> <!--允许file控件接受的文件类型-->
<!--<input type="file" id="imgUpload" name="imgUpload" accept="image/*" multiple/>-->
<div id="destination" style="width:200px;height:200px;border:1px solid #000000;"><img src="nopic.jpg" /></div>
</body>
</html>

二、兼容性

  • •上述方法适用于chrome浏览器
  • •如果是IE浏览器可以直接使用input的value来代替src
  • •网上查看资料有直接使用File对象的getAsDataURL()方法获取URL的,现在这个方法都已经废除,类似的还有getAsText()和getAsBinary()方法;

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jQuery的12招常用技巧分享
Aug 08 Javascript
javascript学习(一)构建自己的JS库
Jan 02 Javascript
js调用webservice中的方法实现思路及代码
Feb 25 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
node.js的事件机制
Feb 08 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
微信小程序实现选项卡效果
Nov 06 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 #Javascript
jQuery实现本地预览上传图片功能
Jan 08 #Javascript
jQuery自定义滚动条完整实例
Jan 08 #Javascript
javascript正则表达式定义(语法)总结
Jan 08 #Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 #Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 #Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 #Javascript
You might like
PHP常用函数小技巧
2008/09/11 PHP
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
javascript编程起步(第六课)
2007/02/27 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
js中判断控件是否存在
2010/08/25 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
JS的replace方法介绍
2012/10/20 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
动态创建类实例代码
2009/10/07 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
python3.6数独问题的解决
2019/01/21 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
python下载微信公众号相关文章
2019/02/26 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
Python如何定义有可选参数的元类
2020/07/31 Python
Python实现像awk一样分割字符串
2020/09/15 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
教育科学研究生自荐信
2013/10/09 职场文书
毕业生自我鉴定
2013/12/04 职场文书
党员剖析材料范文
2014/09/30 职场文书
办公室主任个人总结
2015/02/28 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
MongoDB数据库之添删改查
2022/04/26 MongoDB