當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

使用FormData进行Ajax请求上传文件

發(fā)布時間：2023/12/2 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了使用FormData进行Ajax请求上传文件小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

Servlet3.0開始提供了一系列的注解來配置Servlet、Filter、Listener等等。這種方式可以極大的簡化在開發(fā)中大量的xml的配置。從這個版本開始，web.xml可以不再需要，使用相關(guān)的注解同樣可以完成相應(yīng)的配置。

我筆記里也有記文件上傳：https://www.cnblogs.com/hhmm99/p/9239782.html

a.選中上傳

b:后臺顯示

c:上傳的文件夾

html代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Ajax上傳</title><script src="js/jquery-1.12.4.js"></script> </head> <body><h1>文件上傳</h1><form id="f" enctype="multipart/form-data">UserName:<input type="text" name="userName"><br/>File1:<input type="file" name="file"><br/>File2:<input type="file" name="file"><br/><input type="button" id="btn" value="提交"></form> </body> <script>$(function () {$("#btn").on("click",function () {//使用FormData對象來提交整個表單，它支持文件的上傳var formData=new FormData(document.getElementById("f"));//額外帶來一些數(shù)據(jù) formData.append("age",14);//使用ajax提交 $.ajax("ajaxUpload",{type:"post",data:formData,processData:false,//告訴jquery不要去處理請求的數(shù)據(jù)格式 contentType:false,//告訴jquery不要設(shè)置請求頭的類型 success:function (data) {alert(data);}});})}) </script> </html>

java后臺代碼：

@WebServlet("/ajaxUpload") @MultipartConfig //開啟上傳功能 /*** @author hh*/ public class FileUploadServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");//獲取用戶名String userName=req.getParameter("userName");//獲取年齡String age=req.getParameter("age");System.out.println(userName);System.out.println(age);//獲取項目部署的絕對路徑String uploadPath=req.getServletContext().getRealPath("/photos");//構(gòu)建上傳的文件夾File dir=new File(uploadPath);if(!dir.exists()){dir.mkdir();}//獲取所有上傳的PartCollection<Part> parts= req.getParts();for (Part part:parts) {//判斷上傳的類型是否為空，如果為空則不執(zhí)行上傳if(part.getContentType()!=null){//獲取文件名String fileName=part.getSubmittedFileName();//執(zhí)行上傳part.write(uploadPath File.separator fileName);}}//響應(yīng)上傳成功resp.getWriter().println("uplaod success");} }

更多專業(yè)前端知識，請上【猿2048】www.mk2048.com 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的使用FormData进行Ajax请求上传文件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。