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

前端之家收集整理的这篇文章主要介绍了利用uploadify进行ajax方式进行文件上传前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

3、定义file控件

 
 @H_301_59@
  
  
  • <inputtype="file"id="frontfile"name="frontfile"/>
  • 4、设置上传事件

     
     
    1. $(function(){
    2. $("#backfile").uploadify({
    3. 'uploader':'/js/uploadify/uploadify.swf?v='+newDate(),
    4. 'script':'file_idRegisterUpbackfile.action;jsessionid=<%=session.getId()%>',
    5. 'fileDataname':'backfile',//此处是定义上传控件的id
    6. 'cancelImg':'js/jquery.uploadify-v2.1.0/cancel.png',
    7. 'folder':'UploadFile',
    8. 'auto':true,
    9. 'buttonImg':'/images/diyclaim/liulan_e.jpg',
    10. 'height':25,
    11. 'width':66,
    12. 'fileDesc':'支持图片格式:jpg,jpeg',//点击上传文件选择框中显示文字
    13. 'fileExt':'*.jpg;*.jpeg',
    14. 'sizeLimit':2*1024*1024,
    15. 'onError':function(event,queueID,fileObj,errorObj){
    16. if(errorObj.type=='FileSize')
    17. errorObj.type='文件大小';
    18. alert("图片:"+fileObj.name+"上传失败。错误信息:"+errorObj.type+"异常");
    19. },
    20. 'onComplete':function(event,response,data){
    21. //这里面是回掉函数
    22. varjsonData;
    23. try{
    24. jsonData=eval('('+response+')');
    25. }catch(e){
    26. }
    27. showImage(jsonData.oldfileNameAndPath);//得到后台返回来的字符串
    28. }
    29. });
    30. });

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

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

    猜你在找的Ajax相关文章