當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

AJAX的post请求与上传文件

發布時間：2025/6/15 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 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") { //兼容IExhr = 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") { //兼容IExhr = 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) {// 上傳失敗響應0printWriter.print("0");e.printStackTrace();}// 上傳成功響應1printWriter.print("1");} }

運行效果：

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

總結

以上是生活随笔為你收集整理的AJAX的post请求与上传文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： lua元表和元方法《lua程序设计》
下一篇： Windows azure国际版下通过