主頁 > 知識庫 > 使用FormData進行Ajax請求上傳文件的實例代碼

使用FormData進行Ajax請求上傳文件的實例代碼

熱門標簽:平涼高德地圖標注商戶要收費嗎 福建微碼電話機器人 地圖標注與公司業(yè)務關系 銷售電銷機器人詐騙 廣西智能外呼系統(tǒng)多少錢 大學校門地圖標注 提高電話機器人接通率 外呼系統(tǒng)api對接 荊州智能電銷機器人

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

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"));
   //額外帶來一些數據
   formData.append("age",14);
   //使用ajax提交
   $.ajax("ajaxUpload",{
    type:"post",
    data:formData,
    processData:false,//告訴jquery不要去處理請求的數據格式
    contentType:false,//告訴jquery不要設置請求頭的類型
    success:function (data) {
     alert(data);
    }
   });
  })
 })
/script>
/html>

java后臺代碼:

@WebServlet("/ajaxUpload")
@MultipartConfig //開啟上傳功能
/**
 * @author hh
 */
public class FileUploadServlet extends HttpServlet {
 @Override
 protected 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");
  //構建上傳的文件夾
  File dir=new File(uploadPath);
  if(!dir.exists()){
   dir.mkdir();
  }
  //獲取所有上傳的Part
  CollectionPart> parts= req.getParts();
  for (Part part:parts) {
   //判斷上傳的類型是否為空,如果為空則不執(zhí)行上傳
   if(part.getContentType()!=null){
    //獲取文件名
    String fileName=part.getSubmittedFileName();
    //執(zhí)行上傳
    part.write(uploadPath+File.separator+fileName);
   }
  }
  //響應上傳成功
  resp.getWriter().println("uplaod success");
 }
}

總結

以上所述是小編給大家介紹的使用FormData進行Ajax請求上傳文件的實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

您可能感興趣的文章:
  • Typora+PicGo+GitHub實現md自帶圖床效果
  • ajax使用formdata上傳文件流
  • cmd運行python文件時對結果進行保存的方法
  • 在cmd中運行.py文件: python的操作步驟
  • IDEA中使用Typora編輯md文件的方法

標簽:樂山 婁底 邯鄲 黔東 衡陽 德陽 內江 海南

巨人網絡通訊聲明:本文標題《使用FormData進行Ajax請求上傳文件的實例代碼》,本文關鍵詞  使用,FormData,進行,Ajax,請求,;如發(fā)現本文內容存在版權問題,煩請?zhí)峁┫嚓P信息告之我們,我們將及時溝通與處理。本站內容系統(tǒng)采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《使用FormData進行Ajax請求上傳文件的實例代碼》相關的同類信息!
  • 本頁收集關于使用FormData進行Ajax請求上傳文件的實例代碼的相關信息資訊供網民參考!
  • 推薦文章