JavaScript的FormData+Ajax实现文件上传+图片上传
2018-08-29 22:33
387 查看
JavaScript的FormData+Ajax实现文件上传+图片上传
在很多网页开发中会存在文件上传,图片上传的操作,有的使用form表单默认功能提交文件,有的采用Ajax提交
如果采用form表单的提交方式,恰恰又需要添加额外的参数或者需要设置特定的请求头信息,那么这种方式就显得有些单调了
以下采用第二种方式:采用JavaScript+Ajax来实现文件上传
如果希望在选择文件确认的同时使文件上传提交可以采用下面这种方式:
[code]<input type="file" onchange="upload">
[code]function upload(event) { // event.target.files 是一个数组 // 如果需要上传多个文件,此处可以采用for循环 var file = event.target.files[0]; // 实例化一个FormData对象,便于存储文件对象 var formData = new FormData(); formData.append('file', file); // 调用ajax提交formData实例到服务端 ajaxSubmit(formData); } function ajaxSubmit(data) { var xhr = ''; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { // 兼容IE浏览器 xhr = new ActiveXObject('Microsoft.XMLHTTP') } /** * 参数1:传输类型,常用的有POST,GET * 参数2:请求地址,服务端接口 * 参数3:是否采用异步 */ xhr.open('POST', 'http://xxx.com/upload', true); // 设置请求头信息 xhr.setRequestHeader('cookies','dfhjsdfhsjdksjdfhajk'); // 请求过程监控 xhr.onreadystatechange = function () { // 服务端响应状态判断 if (xhr.readyState === 4) { // 服务端返回的状态码判断 if (xhr.status === 200) { // 服务端返回的数据 consolo.log(xhr.responseText); } } } // 发送数据 xhr.send(data); }
如果希望在选择文件后不上传文件,由单独提交按钮一次性上传,可以采用下面这种方式:
[code]<input type="file" id="upFile"> <input type="button" value="文件上传" onclick="upload">
[code]function upload() { // document.getElementById('upFile').files 是一个数组 // 如果需要上传多个文件,此处可以采用for循环 var file = document.getElementById('upFile').files[0]; // 实例化一个FormData对象,便于存储文件对象 var formData = new FormData(); formData.append('file', file); // 调用ajax提交formData实例到服务端 ajaxSubmit(formData); } function ajaxSubmit(data) { var xhr = ''; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { // 兼容IE浏览器 xhr = new ActiveXObject('Microsoft.XMLHTTP') } /** * 参数1:传输类型,常用的有POST,GET * 参数2:请求地址,服务端接口 * 参数3:是否采用异步 */ xhr.open('POST', 'http://xxx.com/upload', true); // 设置请求头信息 xhr.setRequestHeader('cookies','dfhjsdfhsjdksjdfhajk'); // 请求过程监控 xhr.onreadystatechange = function () { // 服务端响应状态判断 if (xhr.readyState === 4) { // 服务端返回的状态码判断 if (xhr.status === 200) { // 服务端返回的数据 consolo.log(xhr.responseText); } } } // 发送数据 xhr.send(data); }
阅读更多
相关文章推荐
- javascript 使用FormData实现图片/文件异步上传
- 安卓上传图片实例,multipart/form-data实现安卓上传文件的功能
- FormData实现ajax方式文件上传
- Android文件图片上传的详细讲解(一)HTTP multipart/form-data 上传报文格式实现手机端上传
- H5实现formdata+ajax+上传进度上传文件
- JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
- 使用html+ajax+formdata+SpringMVC实现单个文件,和多个文件上传功能
- vuejs使用FormData对象,ajax上传图片文件
- ajax+FormData实现图片上传
- 使用FormData进行Ajax请求上传文件到controller层的实现
- Android文件图片上传的详细讲解(一)HTTP multipart/form-data 上传报文格式实现手机端上传
- Android文件图片上传的详细讲解(一)HTTP multipart/form-data 上传报文格式实现手机端上传GOOD
- Android文件图片上传的详细讲解(一)HTTP multipart/form-data 上传报文格式实现手机端上传
- Javascript Fromdata 与jQuery 实现Ajax文件上传以及文件的删除
- 利用html5的FormData对象和ajax实现异步文件上传
- 利用html5的FormData对象和ajax实现异步文件上传
- SpringMVC+Ajax用FormData对象上传页面的图片(文件),并且立马在页面上显示出来
- Ajax使用FormData对象实现无刷新上传文件
- 利用Ajax FormData实现无刷新带进度条文件上传