话不多说,直接上代码

页面部分

<form id="form1" enctype="multipart/form-data">
id_token: <input type="text" id="id_token" value="qweasd123">
文件:<input type="file" id="file" name="imgfile">
<input type="button" onclick="upload()" value="上传">
</form>

js部分

function upload() {
var formData = new FormData();
var file = document.getElementById('file').files[0];
var id_token = $('#id_token').val();
formData.append("file", file);
formData.append("id_token", id_token);
$.ajax({
url: "/ajax/upload",
type: "post",
data: formData,
dataType: "json",
cache: false,//上传文件无需缓存
processData: false,//用于对data参数进行序列化处理 这里必须false
contentType: false, //必须*/
success: function (data) {
console.log(data.file);
console.log(data.id_token);
}
});
}

后台接收部分

@ResponseBody
@RequestMapping(value = "/ajax/upload",method = RequestMethod.POST)
public String upload(MultipartFile file,String id_token) {
JSONObject json = new JSONObject();
try { System.out.println(file.getOriginalFilename());
System.out.println(id_token);
json.put("file", file.getOriginalFilename());
json.put("id_token", id_token);
} catch (Exception e) {
logger.error("AjaxImgController.upload error:", e);
}
return json.toString();
}

结果

![](https://img2018.cnblogs.com/blog/1420848/201811/1420848-20181121112320747-685252521.png)

注意部分

<!--文件上传设置 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="10000000"/>
</bean> <dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>

Ajax 提交图片的更多相关文章

  1. 图片文件转换成Base64编码实现ajax提交图片

    //上传头像图片 function uploadHead(imgPath) { console.log("imgPath = " + imgPath); var image = n ...

  2. web api 如何通过接收文件流的方式,接收客户端及前端上传的文件

    服务端接收文件流代码: public async Task<HttpResponseMessage> ReceiveFileByStream() { var stream = HttpCo ...

  3. springMVC 多文件上传前后台demo

    只是个demo,需要数据校验,流程是通的 配置上传文件的解析器 前端代码; <%@ page language="java" contentType="text/h ...

  4. Django的文件上传以及预览、存储

    思路: 文件上传通过前端的input标签,input设置display:none属性. 内容显示需要让前端通过<img>标签读取图片内容,可以通过<label>标签连接< ...

  5. Laravel建站04--建立后台文章管理

    路由配置 Route::group(['middleware' => 'auth', 'namespace' => 'Admin', 'prefix' => 'admin'], fu ...

  6. .Net之使用Jquery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径

    前言: 首先对于图片上传而言,在我们的项目开发中可以说出现的频率是相当的高的.这篇文章中,我将要描述的是在我们.Net中如何使用Jquery Ajax通过FormData对象异步提交图片文件到后台保存 ...

  7. Django中的文件上传和原生Ajax

    概述 Django中的上传有3种方案: form 表单常规上传,但点击提交后会自动刷新页面 Ajax 上传,不刷新页面,(分为原生ajax上传和jQuery上传),IE7以上不兼容 iframe 上传 ...

  8. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  9. Ajax及跨域

    概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...

随机推荐

  1. 线性dp 之 麻烦的聚餐

    题目描述 为了避免餐厅过分拥挤,FJ要求奶牛们分3批就餐.每天晚饭前,奶牛们都会在餐厅前排队入内,按FJ的设想,所有第3批就餐的奶牛排在队尾,队伍的前端由设定为第1批就餐的奶牛占据,中间的位置就归第2 ...

  2. 面试题千变万化,为什么总是会问MySQL?

    前言 当你简历上写了 熟悉mysql关系型数据库时,那肯定免不了面试官对于myql索引.事务,慢查询等等的考察 那么到底什么是索引,索引的数据类型有哪些,它们的优缺点以及如何去排查那些慢SQL语句等, ...

  3. Python for循环学习总结笔记

    循环是任何语⾔的⼀个必备要素.同样地,for循环就是Python的⼀个重要组成部分.然而还有⼀些内容是初学者常常忽视的.下面是Python for循环学习总结笔记,一起来查漏补缺吧!         ...

  4. python爬虫入门(2)----- lxml

    lxml 简介 lxml使用xpath对xml进行解析,XPath 是一门在 XML 文档中查找信息的语言.XPath 可用来在 XML 文档中对元素和属性进行遍历. 参考官方文档:https://l ...

  5. Git 撤销更改

    一.未使用 git add 缓存代码时 可以使用 git checkout -- filepathname (比如: git checkout -- readme.md  ,不要忘记中间的 “--” ...

  6. Postman安装失败

    https://blog.csdn.net/qq_21282443/article/details/86213972

  7. leetcode题库练习_左旋转字符串

    题目:左旋转字符串 字符串的左旋转操作是把字符串前面的若干个字符转移到字符串的尾部.请定义一个函数实现字符串左旋转操作的功能.比如,输入字符串"abcdefg"和数字2,该函数将返 ...

  8. 今天成功完成二维码扫描程序, 利用zxing

    利用的网上参考文档是https://blog.csdn.net/gorky_19/article/details/78454030,里面介绍了如何修改build.gradle的dependency 和 ...

  9. OFD呼之欲来、来之跚跚,谁之罪?

    软件国产化的浪潮势不可挡,美国逼得逾甚,我们压迫感逾强,唯有奋起直追方慰平生之志. 在板式文档领域,pdf已成为国际标准,亦可称为美国标准:它在该领域一枝独秀,已形成一览众山小之势! pdf出道20余 ...

  10. Golang获取目录下的文件及目录信息

    一.获取当前目录下的文件或目录信息(不包含多级子目录) func main() {  pwd,_ := os.Getwd() //获取当前目录  //获取文件或目录相关信息  fileInfoList ...