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

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

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

介绍：基于JQUERY扩展，图片上传预览插件目前兼容浏览器（工业工程谷歌火狐)不支持旅行队

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

参数说明：

Img:图片身份证；宽度：预览宽度；高度：预览高度；ImgType:支持文件类型；回拨：选择文件显示图片后回调方法；

使用方法：

div mg id=' IMgpr ' width=' 120 ' height=' 120 '/div put type=' file ' id=' up '/把需要进行预览的IMG标签外套一个差异然后给上传控件身份给予上传预览事件

$('#up ').uploadPreview({ Img: 'ImgPr '，Width: 120，Height: 120，ImgType: ['gif '，' jpeg '，' jpg '，' bmp '，' png']，回调函数：(){ })；

实例：

jquery。fn。extend({ uploadpreviews : 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=函数（文件){ var URL=null if(window . createobjecturl！=未定义){ URL=窗口。createobjecturl(文件)} else if(窗口.网址！=未定义){ url=window .URL.createObjectURL(文件)} else if (window.webkitURL！=未定义){ URL=窗口。webkiturl。createobjecturl(文件)}返回URL }；_这个。change(function(){ if(this。value){ if(！RegExp('\ .(' opts .imgtype . join(' | ')' $ '，' I ').测试(这个。价值。tolowercase()){ alert('选择文件错误，图片类型必须是选择ImgType.join('，') '中的一种');this.value=返回false }//高版本Jquey使用if($。支持。前导hitespace)if($。浏览器。msie){//低版本jquery中使用的方式尝试{ $('# '选项Img).attr('src '，_ self。getobjecturl(这。文件[0])} catch(e){ var src=' '；var obj=$('# '选项. img)；var div=obj。父代(' div ')[0]；_ self。select()；if (top！=self){ window。父母。文件。尸体。focus()} else { _ self。blur()} src=document。选择。创建范围().文本；文件。选择。empty()；物体。hide()；obj.parent('div ').CSS({ ' filter ' : ' progid : maximagettransform .微软。alpha imageloader(大小调整方法=比例)'，宽度' :个选项。宽度px '，高度：次选择.高度px ' })；div。过滤器。项目(' dximagettransform .微软。alpha imageloader’).src=src } } else { $("# "选项Img).attr('src '，_ self。GetObjectURl(这个。文件[0])}选项.回调()} })});调用：

$(函数(){ $('#up ')).上传预览({ Img: 'ImgPr '，宽度： 120,高度： 120 });});超文本标记语言结构：

div mg id=' IMgpr ' width=' 120 ' height=' 120 '/div put type=' file ' id=' up '/以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。