uploadify插件是一个前台功能提供的一个比较强大的插件,它基于jquery,能通过ajax进行上传,在上传的过程中可以显示进度条,可以前台对文件大小,文件的格式等等进行校验,也能够展现一些比较绚丽的画面。具体详细可以查看官方的demo
1、官方地址:http://www.uploadify.com/
2、下载此js插件,然后把uploadify插件引入到项目中
3、定义file控件
4、设置上传事件
$(function (){ $("#backfile").uploadify({ 'uploader': '/js/uploadify/uploadify.swf?v='+new Date(), 'script': 'file_idRegisterUpbackfile.action;jsessionid=<%=session.getId()%>', 'fileDataName': 'backfile', //此处是定义上传控件的id 'cancelImg': 'js/jquery.uploadify-v2.1.0/cancel.png', 'folder': 'UploadFile', 'auto': true, 'buttonImg' : '/images/diyclaim/liulan_e.jpg', 'height' : 25, 'width' : 66, 'fileDesc':'支持图片格式:jpg,jpeg', //点击上传,文件选择框中显示的文字 'fileExt':'*.jpg;*.jpeg', 'sizeLimit':2*1024*1024, 'onError' : function(event, queueID, fileObj,errorObj){ if(errorObj.type=='File Size') errorObj.type='文件大小'; alert("图片:" + fileObj.name + " 上传失败。错误信息:"+errorObj.type+" 异常"); }, 'onComplete': function (event, queueID, fileObj, response, data){ //这里面是回掉函数 var jsonData; try{ jsonData=eval('(' + response + ')'); }catch(e){ } showImage(jsonData.oldfileNameAndPath);//得到后台返回来的字符串 } }); });
以上是对此控件的粗略使用,
另外使用jquery.lightbox可以实现其他的比较绚的功能,例如可以展示一个图片的缩略图,然后鼠标点击以后可以在弹出层中看大图,然后通过拖动里面的条,可以把图片放大或者缩小等等,还请亲们自行研究。详细可见官方文档。
本文出自 “” 博客,请务必保留此出处