通过Ajax方式上传文件，使用FormData进行Ajax请求

Ｂｅｙｏｎｄ

于 2019-09-06 14:01:17 发布

阅读量1.1k

点赞数

分类专栏：随手笔记 Java 文章标签： FormData进行Ajax请求

本博客所有内容来源于个人总结、项目经验、网络、书籍、和各类手册。内容旨为方便查询、总结备份、开源分享。部分转载内容均有注明出处，如有侵权请告知，马上删除。转载本文请附上本文链接，并注明转载！

本文链接：https://blog.youkuaiyun.com/u012998306/article/details/100577789

版权

Java 同时被 2 个专栏收录

134 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

随手笔记

63 篇文章

订阅专栏

传统的form表单上传文件会导致页面刷新，不适合多图上传。通过Ajax和FormData，可以实现无刷新文件上传。在使用过程中，需要设置""processData: false, contentType: false""以避免错误，并确保使用较新的JQuery版本，如2.4。同时，可将文件部分与普通表单字段分开处理，方便formData的构建。" 127553525,11706178,Java数组详解：定义、初始化与内存分析,"['Java', '数组', '编程基础', '数据结构']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过传统的form表单写上传多图的时候发现

<form id= "uploadForm" action= "/file/upload" method= "post" enctype ="multipart/form-data">  
     <div >上传文件： <input type ="file" name="file" /></div>  
     <input type ="submit" value="上传"/>  
</form>

如果一次不多选的话单张图片一个一个选择总是会只上传最后一个选中的图片。

而且传统的form表单提交会导致页面刷新，此时就用使用ajax请求接口。

但是上述方式，只能传递一般的参数，上传文件的文件流是无法传递的。

所以就要使用FormData，我们就可以轻松地使用Ajax方式进行文件上传了。

可以先看一下formData使用详解：FormData使用方法详解