温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jquery uploadify的使用

发布时间:2020-04-09 11:59:14 来源:网络 阅读:2206 作者:davenzeng 栏目:web开发

由于项目是存储图片的,要使用到上传的功能,而且个人想做好点。所以在网上搜了下资料,觉得这个jquery 的插件还不错。

首先放个工程的分布图

 

jquery uploadify的使用

 

项目是拿以前搭建好的SSH的框架,不过里面只用到struts2。

用到的jar的话大家自己去下载吧。jquery uploadify的版本是2.1.4的。

index.jsp下面的代码是

 

  1. <!DOCTYPE HTML > 
  2. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
  3. <
  4.     String path = request.getContextPath(); 
  5.     String basePath = request.getScheme() + "://" + request.getServerName() + ":" 
  6.             + request.getServerPort() + path + "/"; 
  7. %> 
  8. <html> 
  9.     <head> 
  10.         <base href="<%=basePath%>"> 
  11.         <title>首页</title> 
  12.     </style> 
  13. <script type="text/javascript" src="js/jquery-1.6.js"></script> 
  14. <script type="text/javascript" src="uploadify/jquery.uploadify.v2.1.4.js"></script> 
  15. <script type="text/javascript" src="uploadify/swfobject.js"></script> 
  16. <link rel="stylesheet" type="text/css" href="uploadify/uploadify.css"> 
  17.      <script type="text/javascript">   
  18.         $(document).ready(function() { 
  19.             $("#uploadify").uploadify({ 
  20.                 'uploader'       : 'uploadify/uploadify.swf',   //flash,上传时的显示 
  21.                 'script'         : 'show.action',               //提交处理的地址,默认是php的 
  22.                 'fileDataName'   : 'file',                      //在处理的地址接收的名字 
  23.                 'cancelImg'      : 'uploadify/cancel.png',      //上传时的取消按钮 
  24.                 'folder'         : '/p_w_picpath',                    //上传放到服务器的哪个路径,(一开始的时候可以的,但是后来不知道修改了什么就在后台也要加上这个文件夹了,那样这个属性就没意思了) 
  25.                 'queueID'        : 'upLoadDiv',                 //显示附件在哪个DIV 
  26.                 'fileDesc'       : '图片文件',                  //选择文件的最后一个框框显示的提示 
  27.                 'fileExt'        : '*.jpg;*.png;*.bmp',         //只允许什么类型的文件上传 
  28.                 'sizeLimit'      : 1024*1024*1,                 //上传文件的大小byte单位的如果是在struts2上面用的话,要在struts.xml里面加上<constant name="struts.multipart.maxSize" value="9999999999999999"></constant> 
  29.                 'queueSizeLimit' : 2,                           //最多可以选择多少个文件 
  30.                 'auto'           : false,                       //自动上传 
  31.                 'multi'          : true,                        //多文件上传 
  32.                 'simUploadLimit' : 2,                           //一次上传多少个文件 
  33.                 'buttonText'     : 'BROWSE',                    //上传的button文字 
  34.                // 'scriptData'   :{'name':'xxx','id':'sss'},    //参数json类型 
  35.                 //'method'       :'get',                        //提交方法类型,默认post,有参数就要get             
  36.                  'onError'       :function(event,queueID,fileObj,errorObj){ 
  37.                             //一般这个的话会在上传上来文件的那个div上显示,但出来的错误是英文的 
  38.                             alert("文件:"+fileObj.name+"上传失败!失败的原因是:"+errorObj.type); 
  39.                 }, 
  40.                 'onAllComplete'  :function(event,data){//ajax返回,所有文件上传之后的回调 
  41.                     alert("一共上传:"+data.filesUploaded+"个文件,错误数:"+data.errors+".上传速度:"+data.speed+"kb/s"); 
  42.                 } 
  43.             });   
  44.         });   
  45.     </script>   
  46.   </head>  
  47.   <body>  
  48.          <div id="upLoadDiv"></div>   
  49.         <input type="file" name="uploadify" id="uploadify" />  <br><br>  
  50.         <a href="javascript:$('#uploadify').uploadifyUpload()">上传</a> 
  51.         <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消所有上传</a> 
  52.   </body>  
  53. </html> 

struts.xml里面的代码挺少的

struts2默认文件上传的大小是2M,大于2M的上传不了。所以我们要设置一下。

  1. <?xml version="1.0" encoding="UTF-8" ?> 
  2. <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd"> 
  3. <struts> 
  4.     <constant name="struts.multipart.maxSize" value="9999999999999999"></constant> 
  5.     <package name="default" extends="struts-default" namespace="/"> 
  6.         <action name="show" class="com.mark.action.Show" method="uploadImg"> 
  7.         </action> 
  8.     </package> 
  9. </struts> 

 

Action类里面的代码:

导包的话大家自己导吧。

  1. public class Show { 
  2.  
  3.     private File file; // 前台传过来的文件 
  4.     private String fileFileName; // 文件名 
  5.     private String fileContentType; // 文件类型 
  6.  
  7.     public void uploadImg() throws IOException  { 
  8.         HttpServletResponse response = ServletActionContext.getResponse(); 
  9.         HttpServletRequest request = ServletActionContext.getRequest(); 
  10.         // 写到服务器上 
  11.         response.setCharacterEncoding("utf-8"); 
  12.         try { 
  13.         String path = request.getRealPath("/p_w_picpath"); 
  14.         FileInputStream in = new FileInputStream(file); 
  15.         FileOutputStream out = new FileOutputStream(new File(path + "/" + fileFileName)); 
  16.         byte[] b = new byte[1024]; 
  17.         while ((in.read(b) > -1)) { 
  18.             out.write(b); 
  19.         } 
  20.         in.close(); 
  21.         out.close(); 
  22.         response.getWriter().write("上传成功!"); 
  23.         }catch (Exception e) { 
  24.             e.printStackTrace(); 
  25.             response.getWriter().write("上传失败!请联系管理员或者重新上传!"); 
  26.         } 
  27.     } 
  28.  
  29.     public File getFile() { 
  30.         return file; 
  31.     } 
  32.  
  33.     public void setFile(File file) { 
  34.         this.file = file; 
  35.     } 
  36.  
  37.     public String getFileFileName() { 
  38.         return fileFileName; 
  39.     } 
  40.  
  41.     public void setFileFileName(String fileFileName) { 
  42.         this.fileFileName = fileFileName; 
  43.     } 
  44.  
  45.     public String getFileContentType() { 
  46.         return fileContentType; 
  47.     } 
  48.  
  49.     public void setFileContentType(String fileContentType) { 
  50.         this.fileContentType = fileContentType; 
  51.     } 

最后发个成品的图片

 

 

jquery uploadify的使用

 

 

jquery uploadify的使用

 

 

jquery uploadify的使用

 

有什么错误的地方请大家指点一下,共同成长!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI