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. View实现涂鸦、撤销以及重做功能

    import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import j ...

  2. EXT2/EXT3文件系统（一）

    整理自<鸟哥的Linux私房菜>,整理者:华科小涛http://www.cnblogs.com/hust-ghtao/ 1.文件系统概念引入 文件系统是一种存储和组织计算机数据的方法,它使 ...

  3. TControl.GetDeviceContext会给图形控件建立新的坐标原点和建立新的剪裁区域

    这是取得DC句柄的其中一种方法(会重定义原点和建立新的剪裁区): function TControl.GetDeviceContext(var WindowHandle: HWnd): HDC; be ...

  4. 记录路径dp-4713-Permutation

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4713 题目大意: 题意同HDU 3092这不过这题要输出路径. 解题思路: 思路同HDU 3092. ...

  5. HDU4452Running Rabbits(模拟)

    HDU4452Running Rabbits(模拟) pid=4452" target="_blank" style="">题目链接 题目大意: ...

  6. Delphi/C#之父首次访华：55岁了 每天都写代码

    Delphi.C#之父Anders Hejlsberg 近日首次访华,并在10月24日和27日参加了两场见面会,分享了他目前领导开发的TypeScript项目,并与国内前端开发者近距离交流.本文就为读 ...

  7. rsync Backups for Windows

    Transfer your Windows Backups to an rsync server over SSH rsync.net provides cloud storage for offsi ...

  8. MFC的消息反射机制

    1.消息反射解释: 父窗口将子窗口发给它的通知消息,首先反射回子窗口进行处理(即给子窗口一个机会,让子窗口处理此消息),这样通知消息就有机会能被子窗口自身进行处理. 2.MFC中引入消息反射的原因: ...

  9. Android菜鸟的成长笔记（14）—— Android中的状态保存探究（上）

    原文:[置顶] Android菜鸟的成长笔记(14)—— Android中的状态保存探究(上) 我们在用手机的时候可能会发现,即使应用被放到后台再返回到前台数据依然保留(比如说我们正在玩游戏,突然电话 ...

  10. android电池充电以及电量检测驱动分析

    前段时间比较烦躁,各种不想学习不想工作,于是休息了几天.这几天又下来任务了--调试充电电路和电池电量检测电路,于是又开始工作,顺便把调试过程记录下来. 平台: cpu        飞思卡尔imx6q ...