**1、注意事項（重要的放前面）**
ajax的put請求不能使用formdata提交 ，不管怎樣數據都為空
ajax的put請求不能使用formdata提交 ，不管怎樣數據都為空
ajax的put請求不能使用formdata提交 ，不管怎樣數據都為空
只能用普通提交，formdata提交只能是文件域的提交
ajax請求類型為put的時候，必須在 web.xml配置
必須配置HttpPutFormContentFilter要不然傳回后臺的數據會為空

ajax提交的方式 后臺的controller不會返回視圖，也就是不會跳轉頁面
因為ajax是局部刷新技術，不會刷新整個頁面
ajax中成功回調函數的rs如果是string類型的話，ajax的請求方式必須加dataType = text
string類型亂碼的話，出現？？？？？

ajax的put請求不能使用formdata提交 ，不管怎樣數據都為空

formdata提交只能是文件域的提交，專門用于上傳圖片

**2、首先讓web程序支持put和delete請求**
需要在web.xml中配置：

<!-- 增加HiddenHttpMethodFilte過濾器：目的是給普通瀏覽器 增加 put|delete請求方式 -->
<!-- 支持restful風格，可以把 POST 請求轉為 DELETE 或 PUT 請求-->
<filter>
<filter-name>HiddenHttpMethodFilter</filter-name>
<filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>HiddenHttpMethodFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

<!--配置SpringMVC，把PUT或者DELETE請求轉換成POST-->
<filter>
<filter-name>HttpPutFormContentFilter</filter-name>
<filter-class>org.springframework.web.filter.HttpPutFormContentFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>HttpPutFormContentFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

**3、Ajax上傳普通文本**
①post方式

$.ajax({
url: "/ssm_kgc/news/updateNews/" + id,
type: "post",
data: {
"_method": "put",
"categoryId":categoryId,
"title":title,
"summary":summary,
"author":author,
"content":content
},
success: function () {

}
})
②put方式提交

$.ajax({
url: "/ssm_kgc/news/updateNews/" + id,
type: "PUT",
data: {
"categoryId":categoryId,
"title":title,
"summary":summary,
"author":author,
"content":content
},
success: function () {

}
})

## 4、Ajax上傳圖片的方式

使用formdata來進行提交

//圖片被修改時觸發，修改文件名
function editImg() {

var formdata = new FormData();
formdata.append("fileUpload", $("#imgFile")[0].files[0]);

//ajax上傳圖片
$.ajax({
url: "/ssm_kgc/fileUpload",
type: "post",
dataType: "text",
data: formdata,
contentType: false,
processData: false,
enctype: "multipart/form-data",
success: function (rs) {
// alert(rs)
if (rs != '') {
$("#myImg").attr("src", "/ssm_kgc/upload/" + rs);
}
}
})
}

input標簽中需要添加標簽：

<label for="imgFile">
<img width="200" id="myImg" src="" alt="">
點擊圖片修改
</label>

<!-- 專門用于上傳文件的-->
<input style="display: none;" οnchange="editImg()" id="imgFile" type="file" name="fileUpload"><br>

這樣就可以了！！！

轉載于:https://www.cnblogs.com/xwd2366846227/p/11187722.html

總結

以上是生活随笔為你收集整理的Ajax基于rest风格上传图片的全部內容，希望文章能夠幫你解決所遇到的問題。

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