<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <meta content="" name="Keywords" /> <meta content="" name="Description" /> <meta content="text/html;charset=utf-8" http-equiv="Content-Type" /> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/uploadPreview.js"></script> <script type="text/javascript"> $(document).ready(function() { $("[type=file]").change(function(){ //预览图片 var $img = $(this).next(); //最大 1M var maxSize = 1024; //获取文件大小 var fileSize = this.files[0].size/1024; if(fileSize>maxSize){ alert('文件过大最大为:' + maxSize + ' KB '); return false; }; //后缀正则表达式 var reg = /^.+[.]png|.+[.]gif|.+[.]jpeg|.+[.]jpg|.+[.]bmp$/; var val = $(this).val(); if(reg.test(val)==false){ alert('图片格式不正确,包含以下格式[gif,jpeg,jpg,bmp,png]'); return false; } if($.browser.msie){//判断是否为ie浏览器 $img.attr("src",$(this).val()) }else{//不是IE浏览器 var objUrl=getObjectURL(this.files[0]); console.log("objUrl="+objUrl); if(objUrl){ $img.attr("src",objUrl); } } }) //建立一個可存取到該file的url function getObjectURL(file) { var url = null ; if (window.createObjectURL!=undefined) { // basic url = window.createObjectURL(file) ; } else if (window.URL!=undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file) ; } else if (window.webkitURL!=undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file) ; }else{ alert('浏览器不支持预览功能!'); } return url ; } }); </script> </head> <body> <form id="form" method="post"> <input type="file" /> <img class="img"/> </form> </body> </html>
相关推荐
使用jquery上传前,预览图片,裁剪,示例使用php接收上传的文件,并且保存为裁剪后的图片。不需要上传后再裁剪图片,只需要本地裁剪好即可,裁剪的时候也可以旋转图片。
Jquery 表单验证+本地图片上传-切割-预览 完全项目 希望不要用于商业用途
在网上找到一个高手写本地图片上传预览的插件,测试通过ie6,ff2.0、3.6,做成个Demo拿来和大家分享,jsp实现
主要介绍了基于jquery实现图片上传本地预览功能的相关资料,需要的朋友可以参考下
html5以及jQuery实现本地图片上传前的预览代码实例讲解 html5以及jQuery实现本地图片上传前的预览,效果类似如下: 选择图片前的页面: 选择图片之后的预览效果: 下面直接上代码(只是最简单的实现代码,css...
主要介绍了jQuery实现的上传图片本地预览效果,结合实例形式分析了jQuery上传图片本地预览所涉及的相关页面元素属性动态操作实现技巧,需要的朋友可以参考下
选择图片时出现本地预览,具有等比例缩放、文件类型判断等功能。兼容ie以及火狐、chorme等浏览器。对于7以上高版本火狐也同样支持
jquery file上传预览本地图片支持IE6\7\8\9\10 chrome 火狐 网上有很多关于 file上传预览本地图片开源角本但都对支持到IE6\7\8,而且chrome 火狐最新版本也有问题,自己动手丰衣足食。分享给给大家。
主要为大家详细介绍了基于jquery实现图片上传前本地预览功能,感兴趣的小伙伴们可以参考一下
前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到...名称:图片上传本地预览插件 v1.1 介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏
主要介绍了jQuery实现本地预览上传图片功能,为大家推荐了一款图片上传预览插件,感兴趣的小伙伴们可以参考一下
一、图片上传实现本地预览 由于上传图片功能,现在大多数都需要在本地实现预览,为了能够更好的让用户体验到效果,实现成品的证明,需要兼容好几种浏览器,所有通过各个例子整合了这个例子插件,兼容火狐、谷歌、ie8...
此工程下页面test.jsp为图片选中预览功能实现
源码地址:http://www.oschina.net/code/snippet_1049351_26784
jQuery可上传文件跟图片的插件是一款支持多个文件同时上传,图片支持预览显示。
插件描述:js上传图片本地预览。 参考实例:http://www.jq22.com/jquery-info6180