jQuery实现图片上传预览效果功能完整实例【测试可用】


Posted in jQuery onMay 28, 2018

本文实例讲述了jQuery实现图片上传预览效果功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>3water.com jquery图片上传预览效果</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  </head>
  <body>
 <input type="file" id="browsefile" >
<div class="images_show" id="images_show">
<p class="first">上传图片预览区</p>
<p>图片仅限JPG、PNG格式</p>
<p>文件尺寸:532×400px</p>
<p>文件大小:200K以内</p>
</div>
</div>
<script type="text/javascript">
//处理file input加载的图片文件
$(document).ready(function(e) {
   //判断浏览器是否有FileReader接口
  if(typeof FileReader =='undefined')
   {
    /*$("#images_show").css({'background':'none'}).html('亲,您的浏览器还不支持HTML5的FileReader接口,无法使用图片本地预览,请更新浏览器获得最好体验');*/
     //如果浏览器是ie
     if($.browser.msie===true)
     {
       //ie6直接用file input的value值本地预览
      if($.browser.version==6)
       {
         $("#browsefile").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" />';
            $("#images_show").empty().append(img);
          });
      }
       //ie7,8使用滤镜本地预览
       else if($.browser.version==7 || $.browser.version==8)
       {
         $("#browsefile").change(function(event){
           $(event.target).select();
            var src = document.selection.createRange().text;
            var dom = document.getElementById('images_show');
            console.log(src);
            //使用滤镜 成功率高
            $("#images_show").css({"filter":"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"});
            /*dom.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= src;*/
            dom.innerHTML = '<img id="head" alt=" " src=+src+ />';
            //使用和ie6相同的方式 设置src为绝对路径的方式 有些图片无法显示 效果没有使用滤镜好
            /*var img = '<img src="'+src+'" width="200px" height="200px" />';
            $("#images_show").empty().append(img);*/
          });
       }
     }
     //如果是不支持FileReader接口的低版本firefox 可以用getAsDataURL接口
     else if($.browser.mozilla===true)
     {
       $("#browsefile").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"/>';
            $("#images_show").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类型
      $("#browsefile").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"/>';
               $("#images_show").empty().append(img);
             }
            }
        });
      //处理图片拖拽的代码
      var destDom = document.getElementById('images_show');
      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>
</body>
</html>

使用HTML/CSS/JavaScript在线运行测试工具http://tools.3water.com/code/HtmlJsRun运行代码,测试效果如下:

jQuery实现图片上传预览效果功能完整实例【测试可用】

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
基于jQuery拖拽事件的封装
Nov 29 jQuery
关于jquery中attr()和prop()方法的区别
May 28 #jQuery
jQuery中将json数据显示到页面表格的方法
May 27 #jQuery
jQuery插件jsonview展示json数据
May 26 #jQuery
jQuery插件Validation表单验证详解
May 26 #jQuery
jQuery创建及操作xml格式数据示例
May 26 #jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 #jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 #jQuery
You might like
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
js分页代码分享
2014/04/28 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
Django3.0 异步通信初体验(小结)
2019/12/04 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
请解释virtual关键字的含义
2015/06/17 面试题
农行实习自我鉴定
2013/09/22 职场文书
个人求职简历的自我评价范文
2013/10/09 职场文书
化工见习报告范文
2014/10/31 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
先进工作者事迹材料
2014/12/23 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
openstack云计算keystone组件工作介绍
2022/04/20 Servers