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 21 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jquery实现进度条状态展示
Mar 26 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/07/19 PHP
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
超详细小程序定位地图模块全系列开发教学
2020/11/24 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
利用Python演示数型数据结构的教程
2015/04/03 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
python pygame实现球球大作战
2019/11/25 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
在线服装零售商:SheIn
2016/07/22 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
临床医学专业毕业生的自我评价
2013/10/17 职场文书
执行力心得体会
2013/12/31 职场文书
干部行政关系介绍信
2014/01/17 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
护理专科学生自荐书
2014/07/05 职场文书
民事诉讼代理委托书
2014/10/08 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis