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. Minor GC、Major GC和Full GC之间的区别（转）

    在 Plumbr 从事 GC 暂停检测相关功能的工作时,我被迫用自己的方式,通过大量文章.书籍和演讲来介绍我所做的工作.在整个过程中,经常对 Minor.Major.和 Full GC 事件的使用感到 ...

  2. linux kill进程和子进程小trick

           我们的hive web是调用polestar restful service(https://github.com/lalaguozhe/polestar-1)来执行具体的hive或者s ...

  3. Boost Thread学习笔记

    thread自然是boost::thread库的主 角,但thread类的实现总体上是比较简单的,前面已经说过,thread只是一个跨平台的线程封装库,其中按照所使用的编译选项的不同,分别决定使用 W ...

  4. POJ 3017 单调队列dp

    Cut the Sequence Time Limit: 2000MS   Memory Limit: 131072K Total Submissions: 8764   Accepted: 2576 ...

  5. Revit二次开发之绘制钢筋

    第一次在博客园上写东西,也不知道该写些什么,我想就写点最近项目到遇到的问题吧. 最近在做一个小项目,具体需求大概是在一个revit模型中的对应的楼板位置绘制钢筋. 由于刚接触Revit二次开发,之前也 ...

  6. POJ 3007 Organize Your Train part II

    题意: 如上图所示,将一个字符串进行分割,反转等操作后不同字符串的个数: 例如字符串abba:可以按三种比例分割:1:3:2:2:3:1 部分反转可以得到如下所有的字符串: 去掉重复可以得到六个不同的 ...

  7. javascript （二） 事件

    <script></script> 函数写法: function  fun_name(){ x=docment.getElementById("demo") ...

  8. hdu 4715

    #include<stdio.h> #include<string.h> int prime[1100000],p[1000000],ans; void pri() {     ...

  9. openwrt 3g模块上网

    硬件环境:     开发板为RT5053F        3G模块为中兴 MC2176 电信版 以下是操作步骤 加入VID .PID VID . PID 的获取方法是 将设备插入电脑在linux下执行 ...

  10. JAVA泛型之<? extends T>:(通配符上限)和<? super T>(通配符下限)

    一.通配符上限和通配符下限接受的类型 通配符上限:<? extends T> 通配符下限:<? super T> 以下代码是测试结果,注释为解释说明 package xayd. ...