通过Ajax方式上传文件,使用FormData进行Ajax请求
发布时间:2020-12-15 21:30:36 所属栏目:百科 来源:网络整理
导读:通过 传统的 form表单提交的方式上传文件: Html代码 form id = "uploadForm" action = "http://localhost:8080/cfJAX_RS/rest/file/upload" method = "post" enctype = "multipart/form-data" h1 测试通过Rest接口上传文件 / p 指定文件名: input type = "
通过
传统的form表单提交的方式上传文件:
不过传统的form表单提交会导致页面刷新,
但是在有些情况下,我们不希望页面被刷新,这种时候我们都是使用Ajax的方式进行请求的:
如上,通过
$(
'#postForm'
).serialize()
可以对form表单进行序列化,从而将form表单中的所有参数传递到服务端。
但是上述方式,只能传递一般的参数,
上传文件的文件流是无法被序列化并传递的。
不过如今主流浏览器都开始支持一个叫做FormData的对象,有了这个FormData,我们就可以轻松地使用Ajax方式进行文件
上传
了。
关于FormData及其用法
FormData是什么呢?我们来看看Mozilla上的介绍。
这里只展示一个通过from表单来初始化FormData的方式
<
form
enctype
=
"multipart/form-data"
method
"post"
name
"fileinfo"
>
varoData=newFormData(document.forms.namedItem("fileinfo"));
参见: https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects
使用FormData,进行Ajax请求并上传文件
这里使用JQuery,但是老版本的JQuery比如1.2是不支持的,最好使用2.0或更新版本: formid="uploadForm"inputtype="text"name="filename"value=""inputtype="button"value="上传"onclick="doUpload()"
functiondoUpload(){
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |