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 tip提示插件(实例分享)
Apr 28 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 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
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
2011/06/20 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
vue 重塑数组之修改数组指定index的值操作
2020/08/09 Javascript
python实现的文件同步服务器实例
2015/06/02 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
python的setattr函数实例用法
2020/12/16 Python
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
院药学专业个人求职信
2013/09/21 职场文书
优秀教师获奖感言
2014/01/31 职场文书
致400米运动员广播稿
2014/02/07 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
股权转让协议范本
2014/12/07 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
Go使用协程交替打印字符
2021/04/29 Golang
Python时间操作之pytz模块使用详解
2022/06/14 Python