**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风格上传图片相关推荐

  1. 实践基于REST风格的Webservice(PHP,C#)

    概念: WEB服务的风格,从维基百科上查了一下,有不下十几种,但是比较常用的就是REST和RPC.其中,基于SOAP协议的Webservice就是RPC风格的. REST全称Representatio ...

  2. 管道 过滤器风格 java_完成基于管道过滤器风格的KWI实现.doc

    完成基于管道过滤器风格的KWI实现.doc 实验2:软件体系结构风格实现 一.实验目的 初步了解不同的体系结构风格 掌握不同体系结构风格的实现 二.实验学时 4学时. 三.实验方法 根据KWIC的描述 ...

  3. vue里面怎么删除部分页面_基于VUE选择上传图片并页面显示(图片可删除)

    基于VUE选择上传图片并在页面显示,图片可删除,具体内容如下 demo例子: 依赖文件: HTML文本内容: 相关照片 JS文本内容: /** * 从 file 域获取 本地图片 url */ fun ...

  4. 基于注解风格的Spring-MVC的拦截器

    Spring-MVC如何使用拦截器,官方文档只给出了非注解风格的例子.那么基于注解风格如何使用拦截器呢? 基于注解基本上有2个可使用的定义类,分别是DefaultAnnotationHandlerMa ...

  5. java ajax传输图片_Java使用Ajax实现跨域上传图片功能

    说明 : 图片服务器是用Nginx搭建的,用的是PHP语言 这个功能 需要 用到两个js文件: jquery.js和jQuery.form.js function submitImgSize1Uplo ...

  6. Comet 反Ajax: 基于jQuery与PHP实现Ajax长轮询(LongPoll)

    传统的AJAX轮询方式,客服端以用户定义的时间间隔去服务器上查询最新的数据.种这种拉取数据的方式需要很短的时间间隔才能保证数据的精确度,但太短的时间间隔客服端会对服务器在短时间内发送出多个请求. 反转 ...

  7. python restful风格_总结python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法

    python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法 这两天在用python的bottle框架开发后台管理系统,接口约定使用RESTful风格请求,前 ...

  8. 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程

    最近发现web api很火,园内也有各种大神已经在研究,本人在asp.net官网上看到一个系列教程,原文地址:http://bitoftech.net/2013/11/25/detailed-tuto ...

  9. java 跨域上传,Java如何利用Ajax完成跨域上传图片的功能介绍

    这篇文章主要介绍了Java使用Ajax实现跨域上传图片功能,需要的朋友可以参考下 说明 : 图片服务器是用Nginx搭建的,用的是PHP语言 这个功能 需要 用到两个js文件: jquery.js和j ...

最新文章

  1. javascript学习之基本概念
  2. URAL 1009. K-based Numbers
  3. (011) Linux之高级键盘技巧
  4. 用linux遇到的一个死循环
  5. POI读取Excel内容格式化
  6. 无意中发现的一份清华大佬的刷题笔记!
  7. OpenCV threshold 二值化
  8. tensorflow精进之路(二十五)——Object Detection API目标检测(下)(VOC数据集训练自己的模型进行目标检测)
  9. 【图像加噪】基于matlab多种噪声图像加噪(含信息熵)【含Matlab源码 1837期】
  10. 全票通过!数据集成平台 SeaTunnel 成功进入 Apache 孵化器!
  11. 自动写代码工具要颠覆码农?(转)
  12. 《近匠》 | 探索一站式智能硬件开发的最佳解决方案
  13. 计算机术语pc是什么意思,pc_pc是什么意思-太平洋IT百科
  14. 将一个word文档按一页或多页拆分成多个文档
  15. R语言广义线性模型函数GLM、glm函数构建泊松回归模型(Poisson regression)、泊松回归模型系数解读、查看系数的乘法效应(Interpreting the model para)
  16. JAVASE02_java的语法规则和规范
  17. 拼多多加密后token破解与还原
  18. pycharm远程debug报错:Couldn‘t apply path mapping to the remote file.
  19. 百胜:从肯德基到东方既白
  20. HTML中定位之绝对定位position:absolute;

热门文章

  1. 文件特殊权限及facl
  2. 牛客网 --java问答题
  3. open-falcon
  4. 转:在RHEL5系统中搭建iSCSI存储服务器
  5. Java新特性(二)
  6. OSChina_IOS版客户端笔记(四)_程序数据、缓存的管理
  7. hbase的HA模式配置和维护
  8. Django的jinja2语法遇到jquery问题: defaultaddress is not defined
  9. 关于sklearn中“决策树是否可以转化为json并进行绘制”的调研
  10. linux中的目录结构---Linux学习笔记