jQuery实现多张图片上传预览（不经过后端处理)

效果图：

图(1)

图(2)

代码如下：

！doctype html html ownerta charset=' utf-8 ' title jquery图片上传预览（不经过后端处理)/title脚本src=' http :http://libs。百度。com/jquery/1。11 .3/jquery。量滴js '/脚本样式/style/head dydiv img class=' IMgpr '/输入类型=' file ' class=' up '/div div img class=' IMgpr '/输入类型=' file ' class=' up '/Divscriptjquery。fn。extend({ upLoadPreview 3360 function(opts){ varopts=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($。支持。领先的hitespace){//低版本jquery中使用$ .浏览器。msie控制台。log(_ self。GetObjectURl(这个。文件[0])；请尝试{ _this.parent('div ').查找('.'选择Img).attr('src '，_ self。GetObjectURl(这个。文件[0])；} catch(e){ var src=' '；var obj=_this.parent('div ').查找('.'选择. 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 { _ this。父代(' div ').查找('.'选择Img).attr('src '，_ self。GetObjectURl(这个。文件[0])}选项.回调()} })});$('.向上').单击(function(){ $(this)).uploadPreview({ Img : ' IMgpr ' })；})/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！