溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

jquery uploadify的使用

發(fā)布時間：2020-04-09 11:59:14 來源：網(wǎng)絡(luò) 閱讀：2206 作者：davenzeng 欄目：web開發(fā)

由于項目是存儲圖片的，要使用到上傳的功能，而且個人想做好點。所以在網(wǎng)上搜了下資料，覺得這個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',               //提交處理的地址，默認(rèn)是php的 
  22.                 'fileDataName'   : 'file',                      //在處理的地址接收的名字 
  23.                 'cancelImg'      : 'uploadify/cancel.png',      //上傳時的取消按鈕 
  24.                 'folder'         : '/p_w_picpath',                    //上傳放到服務(wù)器的哪個路徑，（一開始的時候可以的，但是后來不知道修改了什么就在后臺也要加上這個文件夾了，那樣這個屬性就沒意思了） 
  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'},    //參數(shù)json類型 
  35.                 //'method'       :'get',                        //提交方法類型，默認(rèn)post，有參數(shù)就要get             
  36.                  'onError'       :function(event,queueID,fileObj,errorObj){ 
  37.                             //一般這個的話會在上傳上來文件的那個div上顯示，但出來的錯誤是英文的 
  38.                             alert("文件:"+fileObj.name+"上傳失敗!失敗的原因是:"+errorObj.type); 
  39.                 }, 
  40.                 'onAllComplete'  :function(event,data){//ajax返回，所有文件上傳之后的回調(diào) 
  41.                     alert("一共上傳："+data.filesUploaded+"個文件,錯誤數(shù)："+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默認(rèn)文件上傳的大小是2M，大于2M的上傳不了。所以我們要設(shè)置一下。

  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類里面的代碼：

導(dǎo)包的話大家自己導(dǎo)吧。

  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.         // 寫到服務(wù)器上 
  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("上傳失敗!請聯(lián)系管理員或者重新上傳！"); 
  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.     } 
  52. } 

最后發(fā)個成品的圖片

 

 

jquery uploadify的使用

 

 

jquery uploadify的使用

 

 

jquery uploadify的使用

 

有什么錯誤的地方請大家指點一下，共同成長！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手