使用FormData進(jìn)行Ajax請(qǐng)求上傳文件的實(shí)例代碼
servlet3.0開(kāi)始提供了一系列的注解來(lái)配置servlet、filter、listener等等。這種方式可以極大的簡(jiǎn)化在開(kāi)發(fā)中大量的xml的配置。從這個(gè)版本開(kāi)始，web.xml可以不再需要，使用相關(guān)的注解同樣可以完成相應(yīng)的配置。
a.選中上傳
b:后臺(tái)顯示
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對(duì)象來(lái)提交整個(gè)表單，它支持文件的上傳
var formdata=new formdata(document.getelementbyid("f"));
//額外帶來(lái)一些數(shù)據(jù)
formdata.append("age",14);
//使用ajax提交
$.ajax("ajaxupload",{
type:"post",
data:formdata,
processdata:false,//告訴jquery不要去處理請(qǐng)求的數(shù)據(jù)格式
contenttype:false,//告訴jquery不要設(shè)置請(qǐng)求頭的類(lèi)型
success:function (data) {
alert(data);
}
});
})
})
</script>
</html>
java后臺(tái)代碼：
@webservlet("/ajaxupload")
@multipartconfig //開(kāi)啟上傳功能
/**
* @author hh
*/
public class fileuploadservlet extends httpservlet {
@override
protected void service(httpservletrequest req, httpservletresponse resp) throws servletexception, ioexception {
req.setcharacterencoding("utf-8");
//獲取用戶(hù)名
string username=req.getparameter("username");
//獲取年齡
string age=req.getparameter("age");
system.out.println(username);
system.out.println(age);
//獲取項(xiàng)目部署的絕對(duì)路徑
string uploadpath=req.getservletcontext().getrealpath("/photos");
//構(gòu)建上傳的文件夾
file dir=new file(uploadpath);
if(!dir.exists()){
dir.mkdir();
}
//獲取所有上傳的part
collection<part> parts= req.getparts();
for (part part:parts) {
//判斷上傳的類(lèi)型是否為空，如果為空則不執(zhí)行上傳
if(part.getcontenttype()!=null){
//獲取文件名
string filename=part.getsubmittedfilename();
//執(zhí)行上傳
part.write(uploadpath+file.separator+filename);
}
}
//響應(yīng)上傳成功
resp.getwriter().println("uplaod success");
}
}
總結(jié)
以上所述是小編給大家介紹的使用formdata進(jìn)行ajax請(qǐng)求上傳文件的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)碩編程網(wǎng)站的支持！
學(xué)習(xí)AJAX