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中的deferred对象和extend方法详解
May 08 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jQuery实现获取多选框的值示例
Feb 07 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的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
PHP微信红包API接口
2015/12/05 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
学习ExtJS border布局
2009/10/08 Javascript
比Jquery的document.ready更快的方法
2010/04/28 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
JavaScript中this的用法实例分析
2016/12/19 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
Python3匿名函数用法示例
2018/07/25 Python
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
python构建指数平滑预测模型示例
2019/11/21 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
大专生毕业的自我评价
2014/02/06 职场文书
爱国演讲稿400字
2014/05/07 职场文书
班级体育活动总结
2014/07/05 职场文书
课外活动总结
2015/02/04 职场文书
党小组鉴定意见
2015/06/02 职场文书
唐山大地震的观后感
2015/06/05 职场文书
七年级作文之秋游
2019/10/21 职场文书
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis