使用ajax、servlet實現多檔案的上傳

最後更新：2018-07-26 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

搭建環境

這裡使用maven匯入jar包：

<dependencies>  <!--檔案上傳-->  <dependency>      <groupId>commons-fileupload</groupId>      <artifactId>commons-fileupload</artifactId>      <version>1.3.2</version>  </dependency>  <dependency>      <groupId>org.apache.commons</groupId>      <artifactId>commons-io</artifactId>      <version>1.3.2</version>  </dependency>  <!--json-->  <dependency>      <groupId>org.json</groupId>      <artifactId>json</artifactId>      <version>20160810</version>  </dependency></dependencies>

三個主要的jar包，這裡還將使用jquery以及非同步提交表單，所以需要jquery和jquery.form檔案
jsp頁面

<%--  Created by IntelliJ IDEA.  User: wqh  Date: 2017/5/26  Time: 9:46  To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.min.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.form.js"></script><script type="text/javascript">    $(function () {      $("#sub").bind("click",function () {          var option = {              type:"post",              url:"${pageContext.request.contextPath}/TestServlet",              async: true,              enctype:"multipart/form-data",              dataType:"json",              error:function(data){                  alert(data);              },              success:function(msg){                  //將結果格式化為json                  var json = eval(msg);                  var data = "";                  $.each(json,function (index,item) {                       var key = json[index].file;                       data = data +"==="+ key                  });                    alert(data);              }          };         $("#fileForm").ajaxSubmit(option);      })    });</script><head>    <title>Title</title></head><body>    <form action="#" id="fileForm" enctype="multipart/form-data" method="post" >        <input type="file" name="file"/><br>        <input type="file" name="file"/><br>        <input type="file" name="file"/><br>        <button type="submit"  name="sub" id="sub">提交</button>    </form></body></html>

servlet代碼

檔案上傳測試，上傳檔案就不儲存到本地l。直接向頁面返迴文件名，返回json格式。

 req.setCharacterEncoding("utf-8");        resp.setCharacterEncoding("utf-8");        List<String> fileName = new ArrayList<>();        boolean ismultipartContent = ServletFileUpload.isMultipartContent(req);        //判斷是否是檔案上傳        if (ismultipartContent) {            DiskFileItemFactory factory = new DiskFileItemFactory();            ServletFileUpload fileUpload = new ServletFileUpload(factory);            try {                List<FileItem> fileItems = fileUpload.parseRequest(req);                for (FileItem fileItem : fileItems) {                    //判斷欄位的類型                    if (fileItem.isFormField()) {                        //處理普通欄位                    } else{                        //檔案欄位,處理上傳欄位，這裡就不把檔案儲存到本地了                        fileName.add(fileItem.getName());                    }                }            } catch (FileUploadException e) {                e.printStackTrace();            }            //將list轉化為json            int index = 1;            JSONArray jsonArray = new JSONArray();            for (String s : fileName){                JSONObject jsonObject = new JSONObject();                jsonObject.put("file",s);                jsonArray.put(jsonObject);            }            resp.getWriter().print(jsonArray);        }

測試

選擇上傳的檔案

檔案上傳測試和返回json格式的檔案名稱成功。。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More