jQuery实现多张图片上传预览(不经过后端处理)


Posted in jQuery onApril 29, 2017

效果图:

jQuery实现多张图片上传预览(不经过后端处理)

图(1)

jQuery实现多张图片上传预览(不经过后端处理)

图(2)

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery图片上传预览(不经过后端处理)</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<div>
 <img class="ImgPr"/>
 <input type="file" class="up" />
</div>
<div>
 <img class="ImgPr"/>
 <input type="file" class="up" />
</div>
<script>
jQuery.fn.extend({
   uploadPreview: function(opts) {
    var _self = this,
      _this = $(this);
    opts = jQuery.extend({
     Img: "ImgPr",
     Width: 100,
     Height: 100,
     ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
     Callback: function() {}
    }, opts || {});
    _self.getObjectURL = function(file) {
     var url = null;
     if (window.createObjectURL != undefined) {
      url = window.createObjectURL(file)
     } else if (window.URL != undefined) {
      url = window.URL.createObjectURL(file)
     } else if (window.webkitURL != undefined) {
      url = window.webkitURL.createObjectURL(file)
     }
     return url
    };
    _this.change(function() {
     if (this.value) {
      if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
       alert("选择文件错误,图片类型必须是" + opts.ImgType.join(",") + "中的一种");
       this.value = "";
       return false
      }
      //高版本Jquey使用 if ($.support.leadingWhitespace)
      if ($.support.leadingWhitespace) { //低版本jquery中使用$.browser.msie

       console.log(_self.getObjectURL(this.files[0]));
       try {
        _this.parent('div').find("." + opts.Img).attr('src', _self.getObjectURL(this.files[0]));
       } catch (e) {
        var src = "";
        var obj = _this.parent('div').find("." + opts.Img);
        var div = obj.parent("div")[0];
        _self.select();
        if (top != self) {
         window.parent.document.body.focus()
        } else {
         _self.blur()
        }
        src = document.selection.createRange().text;
        document.selection.empty();
        obj.hide();
        obj.parent("div").css({
         'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
         'width': opts.Width + 'px',
         'height': opts.Height + 'px'
        });
        div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src
       }
      } else {
       _this.parent('div').find("." + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
      }
      opts.Callback()
     }
    })
   }
  });
  $(".up").click(function(){
   $(this).uploadPreview({
    Img: "ImgPr"
   });
  })

</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

jQuery 相关文章推荐
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 #jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 #jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 #jQuery
jquery实现图片上传前本地预览
Apr 28 #jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 #jQuery
jQuery tip提示插件(实例分享)
Apr 28 #jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 #jQuery
You might like
php递归列出所有文件和目录的代码
2008/09/10 PHP
php将数据库导出成excel的方法
2010/05/07 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
PHP实现微信提现功能
2018/09/30 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
Python实现周期性抓取网页内容的方法
2015/11/04 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
win10环境下python3.5安装步骤图文教程
2017/02/03 Python
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
英国网上超市:Ocado
2020/03/05 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
函授教育个人学习的自我评价
2013/12/31 职场文书
动物科学专业求职信
2014/07/27 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
西安大雁塔导游词
2015/02/10 职场文书