jquery实现图片上传前本地预览


Posted in jQuery onApril 28, 2017

前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得到的反而是C:\fakepath\a.jpg,这个路径是错误的。百度之后得到说浏览器基于保护用户的相关安全措施,隐藏了上传的真实路径,用fakepath代替,当然,调整浏览器的相关安全设置可以解决这个问题。但我们不可能让所有用户都通过设置浏览器的安全设置来进行图片上传,这种方法在网络交互上显然不现实。

名称:图片上传本地预览插件 v1.1

介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari

插件网站: http://keleyi.com/keleyi/phtml/image/16.htm

jquery实现图片上传前本地预览

参数说明:

Img:图片ID;

Width:预览宽度;

Height:预览高度;

ImgType:支持文件类型;

Callback:选择文件显示图片后回调方法;

使用方法:

<div>
<img id="ImgPr" width="120" height="120" /></div>
<input type="file" id="up" />

把需要进行预览的IMG标签外 套一个DIV 然后给上传控件ID给予uploadPreview事件

$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { }});

实例:

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 ($.browser.msie) { //低版本jquery中使用的方式
     try {
      $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
     } catch (e) {
      var src = "";
      var obj = $("#" + 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 {
     $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
    }
    opts.Callback()
   }
  })
 }
});

调用:

$(function () {
 $("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120 });
});

HTML结构:

<div>
<img id="ImgPr" width="120" height="120" />
</div>
<input type="file" id="up" />

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件之validation插件
Mar 29 jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 #jQuery
jQuery tip提示插件(实例分享)
Apr 28 #jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 #jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 #jQuery
jquery ui sortable拖拽后保存位置
Apr 27 #jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 #jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 #jQuery
You might like
深入了解php4(1)--回到未来
2006/10/09 PHP
php中取得URL的根域名的代码
2011/03/23 PHP
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
WordPress中Gravatar头像缓存到本地及相关优化的技巧
2015/12/19 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
JQuery 文本框使用小结
2010/05/22 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
node实现基于token的身份验证
2018/04/09 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
Python如何生成xml文件
2020/06/04 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
python 将Excel转Word的示例
2021/03/02 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
大专计算机个人求职的自我评价
2013/10/21 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
安全温馨提示语大全
2015/07/14 职场文书
2015中学学校工作总结
2015/07/20 职场文书
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers