JQuery 實現文件上傳

原創 iamdale11 2018-08-27 15:08

簡述：

實現前端使用jquery上傳文件

後臺用servlet處理文件上傳以及保存


知識點：

1. 用到ajaxfileupload.js庫

2. 後臺servlet文件保存


其中ajaxfileupload的庫下載地址：

http://www.phpletter.com/download_project_version.php?version_id=34


Maven中需要添加兩個java的庫，用來上傳以及在服務器保存文件

[html] view plaincopy
  1. <dependency>  
  2.     <groupId>commons-fileupload</groupId>  
  3.     <artifactId>commons-fileupload</artifactId>  
  4.     <version>1.2.2</version>  
  5. </dependency>  
  6. <dependency>  
  7.     <groupId>org.apache.commons</groupId>  
  8.     <artifactId>commons-io</artifactId>  
  9.     <version>1.3.2</version>  
  10. </dependency>  



項目結構（主要是js）



testUpload.html

[html] view plaincopy
  1. <!DOCTYPE html>  
  2. <head>  
  3. <title>MyWebProject</title>  
  4. <meta charset="utf-8" />  
  5. <link type="text/css" href="./lib/css/jquery-ui-1.8.19.custom.css"  
  6.     rel="stylesheet" />  
  7.     <link type="text/css" href="./lib/css/ajaxfileupload.css"  
  8.     rel="stylesheet" />  
  9. <script type="text/javascript" src="./lib/js/jquery-1.8.3.js"></script>  
  10. <script type="text/javascript" src="./lib/js/ajaxfileupload.js"></script>  
  11. <script type="text/javascript">  
  12. function ajaxFileUpload() {  
  13.     $.ajaxFileUpload({  
  14.         url : "./UploadFile",   //submit to UploadFileServlet  
  15.         secureuri : false,  
  16.         fileElementId : 'fileToUpload',  
  17.         dataType : 'text', //or json xml whatever you like~  
  18.         success : function(data, status) {  
  19.             $("#result").append(data);  
  20.         },  
  21.         error : function(data, status, e) {  
  22.             $("#result").append(data);  
  23.         }  
  24.     });  
  25.     return false;  
  26. }  
  27. </script>  
  28. </head>  
  29.   
  30. <body>  
  31.     <!-- upload file -->  
  32.     <form name="form" action="./UploadFile" method="POST" enctype="multipart/form-data">  
  33.         <table class="tableForm">  
  34.             <thead>  
  35.                 <tr>  
  36.                     <th>JQuery Ajax File Upload</th>  
  37.                 </tr>  
  38.             </thead>  
  39.             <tbody>  
  40.                 <tr>  
  41.                     <td><input id="fileToUpload"  type="file" size="45"   
  42.                         name="fileToUpload"  class="input"></td>  
  43.                 </tr>  
  44.             </tbody>  
  45.             <tfoot>  
  46.                 <tr>  
  47.                     <td><button class="button" id="buttonUpload"  
  48.                             onclick="return ajaxFileUpload();">Upload</button></td>  
  49.                 </tr>  
  50.             </tfoot>  
  51.         </table>  
  52.         <div id="result" style="margin-left:200px"></div>  
  53.     </form>  
  54. </body>  
  55. </html>  

後臺實現：

參考：http://blog.163.com/lin305_gf/blog/static/969524402011718102116625/

UploadFileServlet.java

[java] view plaincopy
  1. package mwp.servlet;  
  2.   
  3. import java.io.File;  
  4. import java.io.IOException;  
  5. import java.util.Iterator;  
  6.   
  7. import javax.servlet.ServletException;  
  8. import javax.servlet.http.HttpServlet;  
  9. import javax.servlet.http.HttpServletRequest;  
  10. import javax.servlet.http.HttpServletResponse;  
  11.   
  12. import org.apache.commons.fileupload.FileItem;  
  13. import org.apache.commons.fileupload.FileItemFactory;  
  14. import org.apache.commons.fileupload.disk.DiskFileItemFactory;  
  15. import org.apache.commons.fileupload.servlet.ServletFileUpload;  
  16. import org.slf4j.Logger;  
  17. import org.slf4j.LoggerFactory;  
  18.   
  19. /** 
  20.  * Servlet implementation class UploadFileServlet 
  21.  */  
  22. public class UploadFileServlet extends HttpServlet {  
  23.     private static final long serialVersionUID = 1L;  
  24.     private static Logger logger = LoggerFactory.getLogger(UploadFileServlet.class);  
  25.   
  26.     /** 
  27.      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) 
  28.      */  
  29.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
  30.         request.setCharacterEncoding("utf-8");  
  31.         //判斷提交過來的表單是否爲文件上傳菜單  
  32.         boolean isMultipart= ServletFileUpload.isMultipartContent(request);  
  33.         if(isMultipart){  
  34.             //構造一個文件上傳處理對象  
  35.             FileItemFactory factory = new DiskFileItemFactory();  
  36.             ServletFileUpload upload = new ServletFileUpload(factory);  
  37.   
  38.             Iterator items;  
  39.             try{  
  40.                 //解析表單中提交的所有文件內容  
  41.                 items = upload.parseRequest(request).iterator();  
  42.                 while(items.hasNext()){  
  43.                     FileItem item = (FileItem) items.next();  
  44.                     if(!item.isFormField()){  
  45.                         //取出上傳文件的文件名稱  
  46.                         String name = item.getName();  
  47.                         //取得上傳文件以後的存儲路徑  
  48.                         String fileName = name.substring(name.lastIndexOf('\\') + 1, name.length());  
  49.                         //上傳文件以後的存儲路徑  
  50.                         String saveDir = this.getServletContext().getRealPath("/upload/");  
  51.                         if (!(new File(saveDir).isDirectory())){  
  52.                             new File(saveDir).mkdir();  
  53.                         }  
  54.                         String path= saveDir + File.separatorChar + fileName;  
  55.   
  56.                         //上傳文件  
  57.                         File uploaderFile = new File(path);  
  58.                         item.write(uploaderFile);  
  59.                     }  
  60.                 }  
  61.             }catch(Exception e){  
  62.                 e.printStackTrace();  
  63.                 response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);    
  64.                 return;    
  65.             }  
  66.             response.setStatus(HttpServletResponse.SC_OK);  
  67.             response.getWriter().append("Success Upload");  
  68.         }   
  69.     }   
  70. }  

測試界面：


如若數據交換格式是JSON，則如下示例

JS

[javascript] view plaincopy
  1. /** 
  2.  * 上傳圖片 
  3.  */  
  4. function uploadUnitImage()  {  
  5.         showLoading("正在上傳，請等待...");  
  6.         $.ajaxFileUpload  
  7.         (  
  8.             {  
  9.                 url:'/my-web/fileUpload?action=uploadImage',//用於文件上傳的服務器端請求地址，目前與優惠券上傳圖片請求地址一致  
  10.                 secureuri:false,//一般設置爲false  
  11.                 fileElementId: 'unitImageToUpload', //文件上傳空間的id屬性  
  12.                 dataType: 'json',//返回值類型 一般設置爲json  
  13.                 success: function (data, status)  //服務器成功響應處理函數  
  14.                 {  
  15.                     if(typeof(data.error) != 'undefined')  
  16.                     {  
  17.                         if(data.error != '')  
  18.                         {  
  19.                             alert(data.error);  
  20.                             dismissLoading();  
  21.                         }else  
  22.                         {  
  23.                             //若上傳成功則自定義一些事  
  24.                             // do something  
  25.                         }  
  26.                     }  
  27.                 },  
  28.                 error: function (data, status, e)//服務器響應失敗處理函數  
  29.                 {  
  30.                     alert(e);  
  31.                     dismissLoading();  
  32.                 }  
  33.             }  
  34.         )  
  35. }  


JAVA

[java] view plaincopy
  1. public void uploadImage(  
  2.         HttpServletRequest request,HttpServletResponse response) throws Exception{  
  3.     logger.debug("上傳圖片");  
  4.     //上傳圖片  
  5.     String fileUrl=uploadFileAndGetFileUrl(request);  
  6.     String responseText = "";  
  7.     if(!StringUtils.isEmpty(fileUrl)){  
  8.         logger.debug("圖片下載地址是"+fileUrl);  
  9.          responseText="{error: '',url: '"+fileUrl+"'}";  
  10.     }else{  
  11.         logger.debug("賬戶創建頁面，圖片上傳失敗");  
  12.         responseText="{error: ''}";  
  13.     }  
  14.       
  15.     responseOutWithText(response, responseText);  
  16. }  

由於AjaxFileUpload在解析返回的response若爲ＪＳＯＮ數據時會出現問題，所以需要轉爲text
[java] view plaincopy
  1. /** 
  2.  * 以文本形式下發數據 
  3.  * @param response 
  4.  * @param responseText 
  5.  */  
  6. protected void responseOutWithText(HttpServletResponse response,  
  7.         String responseText) {  
  8.     response.setCharacterEncoding("UTF-8");  
  9.     response.setContentType("text/html");  
  10.     PrintWriter out = null;  
  11.     try {  
  12.         out = response.getWriter();  
  13.         out.println(responseText);  
  14.         out.close();  
  15.         logger.debug("下發的數據是");  
  16.         logger.debug(responseText);  
  17.     } catch (IOException e) {  
  18.         // TODO Auto-generated catch block  
  19.         e.printStackTrace();  
  20.     } finally {  
  21.         if (out != null) {  
  22.             out.close();  
  23.         }  
  24.     }  
  25. } 
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

java線程併發庫

  ThreadLocal的使用，，，實際上相當於維護了一個Map，其中以鍵值對的形式，存儲了某一個數據被多個線程訪問所對應的值。當然這個數據只能有

xinyetonghua 2020-07-08 12:36:33

分佈式系統各個節點狀態如何同步？淺談一下

寫在前面：2020年面試必備的Java後端進階面試題總結了一份複習指南在Github上，內容詳細，圖文並茂，有需要學習的朋友可以Star一下！ GitHub地址：https://github.com/abel-max/Java-S

毛发旺盛的程序员 2020-07-08 12:27:30

ZooKeeper 一致性協議 ZAB 原理，瞭解一下

一致性協議有很多種，比如 Paxos，Raft，2PC，3PC等等，在這講一種協議，ZAB 協議，該協議應該是所有一致性協議中生產環境中應用最多的了。爲什麼？因爲它是爲 Zookeeper 設計的分佈式一致性協議！ 1. 什麼是

毛发旺盛的程序员 2020-07-08 12:27:20

Spring中Transactional 失效的解決方案，讓我們一起探討一下

寫在前面：2020年面試必備的Java後端進階面試題總結了一份複習指南在Github上，內容詳細，圖文並茂，有需要學習的朋友可以Star一下！ GitHub地址：https://github.com/abel-max/Java-S

毛发旺盛的程序员 2020-07-08 12:27:20

太狠了,Spring全家桶筆記,一站式通關全攻略,已入職某廠漲薪18K

Spring 早已成爲 Java 後端開發事實上的行業標準，無數的公司選擇 Spring 作爲基礎的開發框架，大部分Java 後端程序員在日常工作中也會接觸到 Spring ，因此，如何用好 Spring ，也就成爲 Java

毛发旺盛的程序员 2020-07-08 12:27:20

java中的NAN和INFINITY java中的NAN和INFINITY

    java中的NAN和INFINITY   java浮點數運算中有兩個特殊的情況：NAN、INFINITY。 1、INFINITY： 在浮點數運算時，有時我們會遇到除數爲0的情況，那java是如何解決的呢？ 我們知道，在整型運算中

a318013800 2021-11-28 13:09:28

【Java 小白菜入門筆記 2.2】常用的類和方法

Array Array 含有sort、fill、equals、BinarySearch等方法 import java.util.Arrays; import java.util.Random; public class Arra

江户川柯壮 2020-07-08 12:39:29

springboot增量打包更新--靜態資源分離打包

springboot部署打包爲jar，一般都是全量打包，jar包的大小通常都是超過100M的，並且在進行一般的頁面html微調、js修改、img替換、css樣式修改時也需要重新打包進行部署；每次微小的調整都需要重新打包就太煩了，一

CNOYG 2020-07-08 12:39:29

增加FastDfs多文件存儲路徑

項目需要增加聊天會話功能，涉及到上傳語音圖片等信息。考慮新增一個目錄，所有相關文件存在一個相同的目錄中。因此需要對原項目增加一個存儲的路徑。以前的項目因爲只有一個路徑，且已經運行中。走了些彎路，僅此記錄操作過程。nginx version

pengdayong77 2020-07-08 12:37:23

JSONArray指定日期的反序列化

 JSONArray序列化日期最初用到， 這個是全局設置，會有風險。     String[] dateFormats = new String[] {"yyyyMMdd"};                 JSONUtils.getM

pengdayong77 2020-07-08 12:37:23

java緩存對象，使之不需要每次都從數據庫中獲取,以提高程序性能

直接上源碼，定義一個抽象類，必須實現get方法。該方法是用來獲取需要緩存的對象的。  import java.util.HashMap; import java.util.Map; /** * 用於從數據庫中獲取相應值的緩存類 *

pengdayong77 2020-07-08 12:37:23

類加載和類實例化

Java程序中對類的使用方式分爲兩類 ：主動使用和被動使用 主動使用： 創建類的實例 訪問某個類或接口的靜態變量，或者對該靜態變量賦值 調用類的靜態方法 反射 初始化一個類的子類 java虛擬機啓動時被標明爲啓動類的類 從JDK

吃酒忘情殇 2020-07-08 12:36:21

大數據入門（七）win10上eclipse使用Hadoop的配置

目錄工具eclipse的Hadoop環境配置參考 系列： 大數據入門（一）環境搭建，VMware15+CentOS8.1 配置 https://blog.csdn.net/qq_34391511/article/details/1

33 Audrey 2020-07-08 12:35:23

Java動態綁定機制經典案列理解

如題，直接帶入案例進行理解Java的動態綁定機制，不多說直接上代碼了。 package one; public class JavaTest { public static void main(String[] args

柘月十七 2020-07-08 12:33:16

阿里年薪破百架構師推薦：鳥哥的Linux私房菜，搭配面試題，真香

在Linux實操的過程中，你是否有過這些疑問： 如何提取日誌中含有關鍵字的指定行，上一行或上幾行？ ln 做了符號鏈接，對符號鏈接進行權限修改，原文件是否會受到影響？ Shell 腳本里有很多特殊符號，到底該怎麼用？網上流傳的

毛发旺盛的程序员 2020-07-08 12:27:30