手机扫码 继续浏览

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

摘要: 通过$('#postForm').serialize()可以对form表单进行序列化,从而将form表单中的所有参数传递到服务端。但是该方式,只能传递一般的参数,上传文件的文件流是无法被序列化并传递的。不过如今主流浏览器都开始支持一个叫做FormData的对象,有了这个FormData,我们就可以轻松地使用Ajax方式进行文件上传了。

我们在项目中经常需要用到文件上传功能。有时候还需要异步上传(比如我们不希望被页面被刷新时)。本文主要说一下如何使用ajax来实现文件上传功能。

一、通过传统Form表单提交上传文件

二、Ajax提交上传文件

传统的form表单提交会导致页面刷新,但是在有些情况下,我们不希望页面被刷新,这种时候我们都是使用Ajax的方式进行请求的:

如上,通过$('#postForm').serialize()可以对form表单进行序列化,从而将form表单中的所有参数传递到服务端。

但是上述方式,只能传递一般的参数,上传文件的文件流是无法被序列化并传递的。
不过如今主流浏览器都开始支持一个叫做FormData的对象,有了这个FormData,我们就可以轻松地使用Ajax方式进行文件上传了。

所以要使用FormData,进行Ajax请求并上传文件。

三、使用FormData进行Ajax请求上传文件

发布评论

欢迎回来
修改信息
回复邮件通知

1 评论

Username
Username
666
中国 广西 河池 2018年01月25日 01:45:58 Windows 7 Windows Chrome 62.0.3202.94 Chrome 回复