使用FormData传递表单数据
来源：互联网 发布：手机vb编辑器使用 编辑：程序博客网 时间：2024/05/21 22:31
今天遇到一个需求：通过xhr发送图片，并获取请求的返回值，需要用到FormData对象，具体的实现代码如下：
var xhr = new XMLHttpRequest(),//新建一个xhr对象
input=document.getElementById("input"),//获取监听文件上传的input节点 formData = new FormData();//新建FormData对象 formData.append('img',input.files[0]);//将input图片信息传入表单 xhr.open('POST', 'http://10.189.1.58:3000/upload'); xhr.send(formData);//发送表单数据 xhr.onreadystatechange = () => {//在这里指定上传成功的回调函数，接受返回值 if (xhr.readyState == 4 && xhr.status == 200) { let res = xhr.responseText; console.log(res) } }; //指定回调函数11-29补充：
新需求：实现粘贴发送：
关键点：监听paste事件，读取剪切板的内容，发送数据
思路： 如果没有input等可以响应用户输入的节点，可以监听document的onpaste事件，鼠标离开粘贴区域后解除监听。然后读取文件为二进制流或者base64，传递给后台。由于是react的项目，所以请求的发送和处理是利用了superAent模块，具体实现的代码如下：
pasteIMg() { let that = this; document.onpaste = function(e) { var clip = e.clipboardData,//获取剪切版对象 index = clip.types.length - 1; if (clip.types[index] == 'Files') { var file = clip.items[index].getAsFile();//这里的file是一个blob对象 blobToDataURL(file, function(dataUrl) { that.refs.spinner.setAttribute("show", 1); that.sendRequest.call(that, dataUrl) }); }; } function blobToDataURL(blob, callback) {//将blob对象转为base64格式，这是一个异步的操作，需要在转换完成后即onload事件内获取数据：e.result var a = new FileReader(); a.onload = function() { callback(a.result); } a.readAsDataURsendRequest(dataUrl) { request .post(this.url) .send({ file: dataUrl }) .end((err, res) => { this.refs.spinner.setAttribute("show", 0); let appId = window.location.hash.split("/")[2]; let imgSrc = window.localStorage.getItem(appId) ? JSON.parse(window.localStorage.getItem(appId)) : {}; imgSrc[this.id] = this.url + res.text; window.localStorage.setItem(appId, JSON.stringify(imgSrc)); this.setState({ preview: [this.url + res.text], show: "none" }); }); }
L(blob); } }
下面是发送请求代码：sendRequest(dataUrl) { request .post(this.url) .send({ file: dataUrl }) .end((err, res) => { console.log(res); }
参考文章：http://blog.csdn.net/liangwenmail/article/details/51921167http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html
1 0
- 使用FormData传递表单数据
- 使用formData给后台提交表单数据
- 使用FormData表单数据对象提交表单及上传图片
- FormData表单字段数据对象
- js利用formdata实现ajax传递表单
- 使用FormData对象提交表单
- 使用FormData提交数据
- FormData表单数据对象（h5）快速收集表单信息（注册登录时使用的）
- 关于jQuery使用serializeArray()序列化表单数据，使用FormData()实现AJAX请求的问题
- 使用jquery提交FormData数据
- 上传文件 使用HTML5的FormData 提交表单和文件数据
- ajax 请求后台数据(及使用FormData对象提交表单及上传图片）
- 使用FormData对象提交表单-上传附件
- 提交表单，对表单数据的处理 FormData
- 使用FormData对象提交表单及上传图片
- 使用FormData对象提交表单及上传图片
- 使用FormData对象提交表单及上传图片
- 无刷新表单信息提交，使用HTML5新技术FormData
- Android Camera.Parameters.setRecordingHint
- 商业银行表内业务与表外业务
- VS Code配置及插件推荐
- 总结一下自己第一次写出了的多级联动js
- 重载&隐藏&覆盖
- 使用FormData传递表单数据
- Hibernate之对象关系映射02一对一单向主键关联
- MQ架构设计说明
- 数据库连接池的简单实现
- ansible - nagios和zabbix客户端的部署
- 图解端口映射、本地端口转发、远程端口转发
- java 集合
- java io流的字节流文件传输方式
- HDU-1869-六度分离
