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. .net面试题大全（有答案）

    在网上找来的,希望对大家有所帮助.     1 (1)面向对象的语言具有__继承性_性._封装性_性._多态性 性. (2)能用foreach遍历访问的对象需要实现 _ IEnumerable 接口或 ...

  2. JSP的学习（4）——中文乱码的解决

    本篇将以JSP页面中可能存在的中文乱码问题进行分析和解决. 中文乱码的问题一直是国人在编程过程中的一大头疼问题,这点上在JSP.Servlet或Tomcat上随处可见.比如我们在写一个Servlet时 ...

  3. 高性能C++网络库libtnet实现：Connection

    Connection libtnet只支持IPv4 TCP Connection,之所以这么做都是为了使得实现尽可能的简单.我们主要在Connection类中封装了对tcp连接的操作. Connect ...

  4. Beautiful Soup 中文文档

    Beautiful Soup 3.0 中文文档说明: http://www.crummy.com/software/BeautifulSoup/bs3/documentation.zh.html Be ...

  5. 好多NFS的文章

    http://www.cnblogs.com/lidabo/category/587288.html http://www.cnblogs.com/lidabo/p/4380555.html

  6. LintCode 推断一个二叉树树是否是还有一个二叉树的子书

    有两个不同大小的二进制树: T1 有上百万的节点: T2 有好几百的节点. 请设计一种算法.判定 T2 是否为 T1的子树. /** * Definition of TreeNode: * class ...

  7. Qt制作应用插件

    在Qt下,插件有两种形式,一种是用于QtCreator下,扩展IDE功能.另一种是用于扩展开发者的应用.本文要讲的是后者. 定义一个纯虚类作为插件接口 #include <QtPlugin> ...

  8. Git权威指南学习笔记（二）Git暂存区

    例如以下图所看到的: 左側为工作区,是我们的工作文件夹. 右側为版本号库,当中: index标记的是暂存区(stage),所处文件夹为.git/index,记录了文件的状态和变更信息. master标 ...

  9. uva 11475 - Extend to Palindrome(KMP)

    option=com_onlinejudge&Itemid=8&category=506&page=show_problem&problem=2470" ta ...

  10. android之写文件到sd卡

    1.main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:a ...