jquery实现上传图片预览(需要浏览器支持html5)

<!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="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>

jquery实现上传图片预览(需要浏览器支持html5)的更多相关文章

  1. js上传图片前预览方法（支持预览多个图片）

    运用js实现上传图片前的预览(支持多张图片),实现的例子如下: 1.源码例子: 1)Js脚本页面 <!doctype html> <html> <head> < ...

  2. jquery 图片本地预览

    uploadPreview.js /* *名称:图片上传本地预览插件 v1.1 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *参数说明: I ...

  3. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

  4. jQuery实现图片预览

    摘自:http://www.cnblogs.com/leejersey/p/3660202.html JS代码: /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月2 ...

  5. HTML5上传图片预览

    <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...

  6. HTML5上传图片预览功能

    HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...

  7. JS 上传图片 + 预览功能（一）

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

  8. js兼容火狐显示上传图片预览效果

    js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...

  9. 一款基于jQuery可放大预览的图片滑块插件

    今天给大家分享一款基于jQuery可放大预览的图片滑块插件.这款jQuery焦点图插件的特点是可以横向左右滑动图片,并且点击图片可以进行放大预览,唯一的缺陷是这款焦点图并不能循环切换,如果你有较好的J ...

随机推荐

  1. Eclipse设置Android Logcat输出字体大小

    Window -> Preferences -> Android -> Logcat -> Display Font:点击"Change"button 如图 ...

  2. Decoding BASE64 in ABAP

    Code Gallery Decoding BASE64 in ABAP Skip to end of metadata Created by Frank Klausner, last modifie ...

  3. 通过崩溃地址找错误行数之Delphi版

    通过崩溃地址找错误行数之Delphi版2009-5-11 17:42:35 来源: 转载 作者:网络 访问:360 次 被顶:2 次 字号:[大 中 小]核心提示:什么是 MAP 文件?简单地讲, M ...

  4. Atitit.软件仪表盘(2)--vm子系统--资源占用监測

    Atitit.软件仪表盘(2)--vm子系统--资源占用监測 1.  Jvisualvm.exe 2. jprofile 3. Heap //permgen   monitor 作者::老哇的爪子At ...

  5. xvfb 初步探究

    有时候我们不关注程序是否有界面(比如自动化测试),只要程序在运行就可以了 很感谢 xvfb 这个工具给我们提供了相关的功能 比如在没有 X server 的机器上运行 gedit, 可以用下面的命令 ...

  6. 卸载QTP

    卸载QTP11.5 1.首先需要卸载QTP11.5,点击exe文件,不点击重启 2.然后删除C:"Program Files"下的Mercury Interactive文件夹.(默 ...

  7. ThinkPhp学习07

    原文:ThinkPhp学习07 简单CRUD操作 public function show() { $m=M('User'); // $arr=$m->find(2); //查找id=2的数据, ...

  8. 更改windows系统语言，改为英文

  9. iOS应用开发详解

    <iOS应用开发详解> 基本信息 作者: 郭宏志    出版社:电子工业出版社 ISBN:9787121207075 上架时间:2013-6-28 出版日期:2013 年7月 开本:16开 ...

  10. Citrix 服务器虚拟化之三十一 XenApp 6.5负载均衡

    Citrix 服务器虚拟化之三十一 XenApp 6.5负载均衡 说明:       环境基于实验三十 1.准备一台Windows Server 2008 R2的虚拟机名为XenAPP2,然后加入域k ...