Heim > php教程 > php手册 > 原创jquery图片上传预览插件uploadView

原创jquery图片上传预览插件uploadView

WBOY
Freigeben: 2016-06-07 11:36:45
Original
1162 Leute haben es durchsucht

勾国印原创jquery图片上传前预览插件uploadView,支持自定义允许上传图片的最大尺寸、允许上传图片的格式、预览图片的宽度和高度以及上传成功后回调函数,兼容手机端和PC端。
大家在开发网站时经常会遇到上传图片前先预览图片的情况,比如上传头像,因此本人特意抽出时间将自己之前做的封装成jquery插件,插件代码简洁,使用方便,直接就可以拿来使用,希望对大家有所帮助。
演示效果地址:http://www.gouguoyin.cn/demo/uploadview/index.html
下载地址:http://www.gouguoyin.cn/js/81.html

使用方法如下:
首先下载源码,在模板页加入上传框,结构如下:<div> <br>     <div> <br>       <a><i></i><span>上传</span>图片</a><br>       <input><br>     </div> <br>     <br>     <div><img alt="原创jquery图片上传预览插件uploadView" ></div> <br> </div>然后再引入插件jquery.uploadView.js(注意先后顺序,jquery必须要在插件之前引入)然后在模板页配置插件参数,配置如下$(".js_upFile").uploadView({<br>     uploadBox: '.js_uploadBox',//设置上传框容器<br>     showBox : '.js_showBox',//设置显示预览图片的容器<br>     width : 100, //预览图片的宽度,单位px<br>     height : 100, //预览图片的高度,单位px<br>     allowType: ["gif", "jpeg", "jpg", "bmp", "png"], //允许上传图片的类型<br>     maxSize :2, //允许上传图片的最大尺寸,单位M<br>     success:function(e){<br>         $(".js_uploadText").text('更改');<br>         alert('图片上传成功');<br>     }<br> });其中.js_uplFile是上传按钮,uploadBox用来设置上传框容器,showBox用来设置显示预览图片的容器,width用来设置预览图片的宽度,height用来设置预览图片的高度,width不传值时显示图片原始宽度,height不传值时显示图片原始高度,maxSize用来设置允许上传文件的最大尺寸,单位为M。success为上传成功时的回调函数。
演示效果地址:http://www.gouguoyin.cn/demo/uploadview/index.html
下载地址:http://www.gouguoyin.cn/js/81.html

AD:真正免费,域名+虚机+企业邮箱=0元

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage