利用uploadify进行ajax方式进行文件上传

uploadify插件是一个前台功能提供的一个比较强大的插件，它基于jquery，能通过ajax进行上传，在上传的过程中可以显示进度条，可以前台对文件大小，文件的格式等等进行校验，也能够展现一些比较绚丽的画面。具体详细可以查看官方的demo

1、官方地址：http://www.uploadify.com/

2、下载此js插件，然后把uploadify插件引入到项目中

 
 

  
  
<scriptsrc="<c:urlvalue="/js/uploadify/swfobject.js"/>"type="text/javascript"charset="utf-8"></script>
  
  
<scriptsrc="<c:urlvalue="/js/uploadify/jquery.uploadify.v2.1.0.js"/>"type="text/javascript"charset="utf-8">
  
  
</script>
 
 

3、定义file控件

 
 

  
  
<inputtype="file"id="frontfile"name="frontfile"/>
 
 

4、设置上传事件

 
 

  
  
$(function(){
  
  
$("#backfile").uploadify({
  
  
'uploader':'/js/uploadify/uploadify.swf?v='+newDate(),
  
  
'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=='FileSize')
  
  
errorObj.type='文件大小';
  
  
alert("图片："+fileObj.name+"上传失败。错误信息："+errorObj.type+"异常");
  
  
},
  
  
'onComplete':function(event,response,data){
  
  
//这里面是回掉函数
  
  
varjsonData;
  
  
try{
  
  
jsonData=eval('('+response+')');
  
  
}catch(e){
  
  
}
  
  
showImage(jsonData.oldfileNameAndPath);//得到后台返回来的字符串
  
  

  
  
}
  
  
});
  
  
});
 
 

以上是对此控件的粗略使用，

另外使用jquery.lightbox可以实现其他的比较绚的功能，例如可以展示一个图片的缩略图，然后鼠标点击以后可以在弹出层中看大图，然后通过拖动里面的条，可以把图片放大或者缩小等等，还请亲们自行研究。详细可见官方文档。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!