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
Ajax基于rest风格上传图片相关推荐
- 实践基于REST风格的Webservice(PHP,C#)
概念: WEB服务的风格,从维基百科上查了一下,有不下十几种,但是比较常用的就是REST和RPC.其中,基于SOAP协议的Webservice就是RPC风格的. REST全称Representatio ...
- 管道 过滤器风格 java_完成基于管道过滤器风格的KWI实现.doc
完成基于管道过滤器风格的KWI实现.doc 实验2:软件体系结构风格实现 一.实验目的 初步了解不同的体系结构风格 掌握不同体系结构风格的实现 二.实验学时 4学时. 三.实验方法 根据KWIC的描述 ...
- vue里面怎么删除部分页面_基于VUE选择上传图片并页面显示(图片可删除)
基于VUE选择上传图片并在页面显示,图片可删除,具体内容如下 demo例子: 依赖文件: HTML文本内容: 相关照片 JS文本内容: /** * 从 file 域获取 本地图片 url */ fun ...
- 基于注解风格的Spring-MVC的拦截器
Spring-MVC如何使用拦截器,官方文档只给出了非注解风格的例子.那么基于注解风格如何使用拦截器呢? 基于注解基本上有2个可使用的定义类,分别是DefaultAnnotationHandlerMa ...
- java ajax传输图片_Java使用Ajax实现跨域上传图片功能
说明 : 图片服务器是用Nginx搭建的,用的是PHP语言 这个功能 需要 用到两个js文件: jquery.js和jQuery.form.js function submitImgSize1Uplo ...
- Comet 反Ajax: 基于jQuery与PHP实现Ajax长轮询(LongPoll)
传统的AJAX轮询方式,客服端以用户定义的时间间隔去服务器上查询最新的数据.种这种拉取数据的方式需要很短的时间间隔才能保证数据的精确度,但太短的时间间隔客服端会对服务器在短时间内发送出多个请求. 反转 ...
- python restful风格_总结python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法 这两天在用python的bottle框架开发后台管理系统,接口约定使用RESTful风格请求,前 ...
- 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程
最近发现web api很火,园内也有各种大神已经在研究,本人在asp.net官网上看到一个系列教程,原文地址:http://bitoftech.net/2013/11/25/detailed-tuto ...
- java 跨域上传,Java如何利用Ajax完成跨域上传图片的功能介绍
这篇文章主要介绍了Java使用Ajax实现跨域上传图片功能,需要的朋友可以参考下 说明 : 图片服务器是用Nginx搭建的,用的是PHP语言 这个功能 需要 用到两个js文件: jquery.js和j ...
最新文章
- javascript学习之基本概念
- URAL 1009. K-based Numbers
- (011) Linux之高级键盘技巧
- 用linux遇到的一个死循环
- POI读取Excel内容格式化
- 无意中发现的一份清华大佬的刷题笔记!
- OpenCV threshold 二值化
- tensorflow精进之路(二十五)——Object Detection API目标检测(下)(VOC数据集训练自己的模型进行目标检测)
- 【图像加噪】基于matlab多种噪声图像加噪(含信息熵)【含Matlab源码 1837期】
- 全票通过!数据集成平台 SeaTunnel 成功进入 Apache 孵化器!
- 自动写代码工具要颠覆码农?(转)
- 《近匠》 | 探索一站式智能硬件开发的最佳解决方案
- 计算机术语pc是什么意思,pc_pc是什么意思-太平洋IT百科
- 将一个word文档按一页或多页拆分成多个文档
- R语言广义线性模型函数GLM、glm函数构建泊松回归模型(Poisson regression)、泊松回归模型系数解读、查看系数的乘法效应(Interpreting the model para)
- JAVASE02_java的语法规则和规范
- 拼多多加密后token破解与还原
- pycharm远程debug报错:Couldn‘t apply path mapping to the remote file.
- 百胜:从肯德基到东方既白
- HTML中定位之绝对定位position:absolute;