AJAX的post請求與上傳文件

之前介紹了AJAX的get的請求方式與跨域請求，除此之外AJAX還可以進行異步的post請求，在使用post方式的請求時需要設置請求頭，如下：

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

如果沒有設置請求頭信息的話，服務端是接收不到post數據的。

以下示例簡單演示如何提交post表單數據：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script> function createCORSRequest(method, url) { var xhr = new XMLHttpRequest(); if ("withCredentials" in xhr) { xhr.open(method, url, true); // 設置請求頭信息 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } else if (typeof XDmainRequest != "undefined") { //兼容IE xhr = new XDmainRequest(); xhr.open(method, url, true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } else { xhr = null; } return xhr; } function sendCode() { var request = createCORSRequest('post', 'send'); if (request) { request.onload=function () { if(request.responseText){ // 顯示服務端響應的數據 alert(request.responseText); }else{ alert("服務端沒有響應數據！"); } }; // 發送post表單數據 request.send("phone="+telNumber.value); } } </script>
<body>
    <input type="text" name="phone" id="telNumber" placeholder="手機號碼" />
    <button type="button" onclick="sendCode()">發送</button>
</body>
</html>

服務端代碼：

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/send")
public class SendCodeServlet extends HttpServlet {

    protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
        System.out.println("手機號碼是：" + httpServletRequest.getParameter("phone"));

        httpServletResponse.setContentType("text/html;charset=UTF-8");
        PrintWriter printWriter = httpServletResponse.getWriter();
        printWriter.print("服務器已收到");
    }
}

服務端控制檯打印結果：

手機號碼是：1234567899

客戶端顯示響應數據：

通過AJAX上傳文件

上面我們演示了使用AJAX提交post表單數據，那麼上傳文件的請求方式也是post，以下示例演示簡單的使用AJAX做一個帶有進度條的文件上傳。
頁面代碼：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script> function createCORSRequest(method, url) { var xhr = new XMLHttpRequest(); if ("withCredentials" in xhr) { xhr.open(method, url, true); } else if (typeof XDmainRequest != "undefined") { //兼容IE xhr = new XDmainRequest(); xhr.open(method, url, true); } else { xhr = null; } return xhr; } function upload() { // 表單數據對象 var formData = new FormData(); // 多個文件需要進行逐個遍歷 for (var i = 0; i < document.getElementById("files").files.length; i++) { // 將文件數據添加到表單數據中 formData.append("files", document.getElementById("files").files[i]); } var request = createCORSRequest('post', 'upload'); if (request) { request.onload = function () { if (request.responseText == "1") { alert("上傳成功！"); } else { alert("上傳失敗！"); } }; // 給進度條添加監聽事件，這樣纔有進度條的效果 request.upload.addEventListener("progress", progressChange, false) // 上傳表單數據 request.send(formData); } } // 改變進度條 function progressChange(event) { progress1.max = event.total; // 數據的總大小 progress1.value = event.loaded; // 當前已上傳的大小 } </script>
<body>
    <input type="file" id="files" name="fileUpload" multiple="multiple"/>
    <button type="button" name="button" onclick="upload()">上傳</button>
    <br><br>
    <progress id="progress1"></progress>
</body>
</html>

服務端代碼：

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FileUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

@WebServlet("/upload")
public class UploadServlet extends HttpServlet {

    protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
        PrintWriter printWriter = httpServletResponse.getWriter();
        // 設置臨時文件的保存路徑
        DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory();
        diskFileItemFactory.setRepository(new File("D:/"));

        // 實例化文件上傳對象
        ServletFileUpload servletFileUpload = new ServletFileUpload(diskFileItemFactory);
        servletFileUpload.setHeaderEncoding("UTF-8");

        // 文件的保存路徑
        File savePath = new File(this.getServletContext().getRealPath("/uploadDir"));
        System.out.println(savePath.getPath());
        try {
            // 拿出請求數據
            List<FileItem> fileItems = servletFileUpload.parseRequest(httpServletRequest);
            for (FileItem fileItem : fileItems) {
                // 過濾表單字段
                if (!fileItem.isFormField()) {
                    //兼容IE，IE傳過來的是路徑，需要截取出文件名
                    String fileName=fileItem.getName();
                    if (fileName.indexOf("\\") >= 0) {
                        System.out.println(fileName);
                        fileName=fileName.substring(fileName.lastIndexOf("\\"),fileName.length());
                    }
                    // 寫入文件到保存路徑中
                    FileUtils.copyInputStreamToFile(fileItem.getInputStream(), new File(savePath, fileName));
                }
            }

        } catch (FileUploadException e) {
            // 上傳失敗響應0
            printWriter.print("0");
            e.printStackTrace();
        }

        // 上傳成功響應1
        printWriter.print("1");
    }
}

運行效果：

本文轉自 ZeroOne01 51CTO博客，原文鏈接：http://blog.51cto.com/zero01/2055546，如需轉載請自行聯繫原作者