Ajax基于rest风格上传图片

**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