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. 关于在打包Jar文件时遇到的资源路径问题(二)

    在关于<关于在打包Jar文件时遇到的资源路径问题(一)>中,以及描述了当资源与可执行JAr分离时的资源路径代码的编写问题,后来想了想,为什么将<Java核心技术卷一>中的程序1 ...

  2. CImageList类Create函数参数解析

    前面提到了CImageList类的Create(...)函数,虽然MSDN上已经有所解释,但仍有网友问到参数的具体含义,下面就我的理解,对参数进行一次轻量级的剖析 函数原型(其他重载函数请参看msdn ...

  3. No matching code signing identity found

    真机调试过程中弹出这个问题,网上找到的解决的方法,记录一下. .... 弄完这些步骤之后,上面多出一个 IOS disturbution.所以出现这个问题的解决办法应该是设置的证书没有刷新到本地所致.

  4. winform实现listview中combox

    一.概要 因为要在项目中要在ListView中实现下拉框选择,用DataGrid的话,一个不美观,二个绑定数据麻烦,参考网上一种做法,就是单击ListView时,判断单击的区域,然后将Combox控件 ...

  5. mysql sql执行顺序

    <pre name="code" class="html">mysql> explain select * from (select * fr ...

  6. json转换成list map集合

    import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Set; i ...

  7. 八皇后问题详细分析与解答（递归法解答,c#语言描述）

    八皇后问题,是一个古老而著名的问题,是回溯算法的典型例题.该问题是十九世纪著名的数学家高斯1850年提出:在8X8格的国际象棋上摆放八个皇后,使其不能互相攻击,即任意两个皇后都不能处于同一行.同一列或 ...

  8. Android Studio中如何打JAR包

    Android Studio中对于library类型的Moudle,默认打出来的是AAR包, 但有时候我们的SDK还需要共享给一些其他eclipse的项目使用,这样我们就需要输出JAR包, 可以通过在 ...

  9. apache的开源项目-模板引擎(Velocity)(转)

    然后修改conf文件下的server.xml文件,在server.xml里的           <Connector port="8080" .... />字段后   ...

  10. php 上传文件 $_FILES['']['type']的值

    php 上传文件 $_FILES['']['type']的值 一个函数 function upload_file($fname,$ftype,$fsize,$ferror,$ftmp_name,$fp ...