jQuery图片上传前先在本地预览（不经过后端处理）

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

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

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

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

*参数说明:

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" />

本人发布的插件测试地址：http://www.jq22.com/webqd875

转载于:https://www.cnblogs.com/tongkaiqiang/p/6780822.html

jQuery图片上传前先在本地预览（不经过后端处理）相关推荐

python与html交互实现图片上传_python 实现上传图片并预览的3种方法(推荐)
在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内 ...
微信公众号开发《四》使用微信JS-SDK实现手机图片上传，支持压缩、预览。并下载图片到自身服务器
在这粘贴上三篇博文链接,方便大家查阅互相学习: 微信公众号开发<一>OAuth2.0网页授权认证获取用户的详细信息,实现自动登陆微信公众号开发<二>发送模板消息实现消息业务实 ...
ajax：html5上传文件，上传之前可以实现本地预览
本主题主要涉及两个新内容: 1.上传文件(主要使用了FormData) 2.本地预览(主要使用了FileReader) html5的FormData其实就是平时的Form表单,只是html5可以直接新 ...
input文件框选择本地图片后页面预览图片并获取图片长宽以及大小图片上传前预览
前面有转过一篇通过HTML5来实现图片上传前预览 ,现在借助FileReader也实现了这个需求.并且同时还可以获得图片的长宽相素以及图片文件的大小.demo如下: <html> < ...
JavaScript 实现图片上传前本地预览
JavaScript 实现图片上传前本地预览图片上传前预览,应该算是一个普遍的需求,很多时候可能选中的图片并不是想要的那张,所以需要上传前预览下. JS(浏览器中)是一门特殊的语言,它没有直接读写磁 ...
html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
php主页显示商品预览图代码,jQuery实现鼠标滑过商品小图片上显示对应大图商品页预览功能...
这次给大家带来jQuery实现鼠标滑过商品小图片上显示对应大图商品页预览功能,jQuery实现鼠标滑过商品小图片上显示对应大图商品页预览功能的注意事项有哪些,下面就是实战案例,一起来看一下. 1 . ...
SpringBoot+Vue+OpenOffice实现文档管理(文档上传、下载、在线预览)
场景 SpringBoot集成OpenOffice实现doc文档转html: SpringBoot集成OpenOffice实现doc文档转html_BADAO_LIUMANG_QIZHI的博客-CSD ...
java 预览zip_java压缩包上传，解压，预览(利用editor.md和Jstree实现)和下载
java压缩包上传,解压,预览(利用editor.md和Jstree实现)和下载实现功能:zip文件上传,后台自动解压,Jstree树目录(遍历文件),editor.md预览采用Spring+Sp ...

jQuery图片上传前先在本地预览（不经过后端处理）

jQuery图片上传前先在本地预览（不经过后端处理）相关推荐

最新文章

热门文章