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实现动态给table赋值的方法示例
Jul 04 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
html中两种获取标签内的值的方法
Jun 16 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 数组的创建、调用和更新实现代码
2009/03/09 PHP
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
室内趣味活动方案
2014/08/24 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫