内容简介:FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用。如果表单enctype属性设为multipart/form-data ,则会使用表单的submit()方法来发送数据,从而,发送数据具有同样形式。之前一直用jquery的form插件自带的方法ajaxSubmit提交表单。这种方法太依赖库,在移动端会产生多大的资源消耗,于是还是用FormData提交比较合适。FormData也是
FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用。如果表单enctype属性设为multipart/form-data ,则会使用表单的submit()方法来发送数据,从而,发送数据具有同样形式。
之前一直用jquery的form插件自带的方法ajaxSubmit提交表单。
$('#myForm2').submit(function() { $(this).ajaxSubmit(function() { $('#output2').html("提交成功!欢迎下次再来!").show(); }); return false; //阻止表单默认提交 }); 复制代码
这种方法太依赖库,在移动端会产生多大的资源消耗,于是还是用FormData提交比较合适。FormData也是H5新增
==FormData可以添加由用户选择的HTML 文件类型input,也可以添加JavaScript file-like 对象== 还可以直接向FormData对象附加File或Blob类型的文件,如下所示:
data.append("myfile", myBlob, "filename.txt"); 复制代码
一、通过Html元素创建FormData对象
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <form action=""> <label for=""> 姓名: <input type="text" name="name"> </label> <label for=""> 文件:<input id="file" type="file" name="file"> </label> <label for=""> <input type="button" value="保存"> </label> <div class="progress"></div> </form> <script> var btn = document.querySelector('[type=button]'); var progress = document.querySelector('.progress') btn.onclick = function () { // 文件元素 var file = document.querySelector('[type=file]'); // 通过FormData将文件转成二进制数据 var formData = new FormData(); // 将文件转二进制 formData.append('upload', file.files[0]); // JavaScript file-like 对象 var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文... var blob = new Blob([content], { type: "text/xml"}); formData.append("webmasterfile", blob); var xhr = new XMLHttpRequest; xhr.open('post', './file.php'); // 监听上传进度 xhr.upload.onprogress = function (ev) { // 事件对象 // console.log(ev); var percent = (ev.loaded / ev.total) * 100 + '%'; console.log(percent); progress.style.width = percent; } xhr.send(formData); xhr.onreadystatechange = function () { if(xhr.readyState == 4 && xhr.status == 200) { // } } } </script> </body> 复制代码
二、通过Html Form元素创建FormData对象,用ajax提交。
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <form enctype="multipart/form-data" method="post" name="fileinfo"> <label>Your email address:</label> <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64"/><br/> <label>Custom file label:</label> <input type="text" name="filelabel" size="12" maxlength="32"/><br/> <label>File to stash:</label> <input type="file" name="file" required/> <input type="submit" value="Stash the file!"/> </form> <script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script> <script> var form = document.forms.namedItem("fileinfo"); form.addEventListener('submit', function (ev) { ev.preventDefault() // 文件元素 var fd = new FormData(document.querySelector("form")); fd.append("CustomField", "This is some extra data"); $.ajax({ url: "./file.php", type: "POST", data: fd, processData: false, // 不处理数据 contentType: false // 不设置内容类型 }); }) </script> </body> 复制代码
请求头为:Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryVXQzCH5gOtjud1Xu
“——WebKitFormBoundary”加16位随机Base64位编码的字符串作为分隔边界
三、使用antd-mobile的ImagePicker + fetch上传
import { ImagePicker, WingBlank, SegmentedControl } from 'antd-mobile'; const data = [{ url: 'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg', id: '2121', }, { url: 'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg', id: '2122', }]; export default class ImagePickerExample extends React.Component { state = { files: data, multiple: false, } onImageChange = (files, type, index) => { if (type == 'add') { var file = files[files.length - 1].file let formData = new FormData(); formData.append("file", file); files[files.length - 1].url = '../../../../src/white.png' this.setState({files}) fetch('./file.php', { method: 'POST', headers: {}, body: formData, }).then((response) => response.json()).then((res)=> { if (res.code == 200) { files[files.length - 1].url = res.value.fileUrl } this.setState({files},function () { const dom = document.querySelectorAll('.am-image-picker-item') dom[files.length - 1].className +=' now' }); }).catch((err)=> { util.showWarning(err) }); } else { this.setState({files}); } } render() { const { files } = this.state; return ( <div> <ImagePicker files={files} onChange={this.onImageChange} onImageClick={(index, fs) => console.log(index, fs)} selectable={files.length < 3} multiple={false} /> </div> ); } } 复制代码
onImageChange files 值发生变化触发的回调函数, operationType 操作类型有添加,移除,如果是移除操作,则第三个参数代表的是移除图片的索引
判断type== 'add'时就上传图片,因为设置的是单个上传,所以files数组最后一个数据就是新添加需要上传的file
var file = files[files.length - 1].file 复制代码
使用FormData将数据封装
let formData = new FormData(); formData.append("file", file); 复制代码
因为上传需要时间,为了增强用户体验,先将地址替换成一张透明png图片展位,显示loading
files[files.length - 1].url = '../../../../src/white.png' this.setState({files}) 复制代码
注意在使用fetch方法时,不用设置header,body上直接传封装后的formData
fetch('./file.php', { method: 'POST', headers: {}, body: formData, }) 复制代码
原生的移动端上传参考大神的方法: segmentfault.com/a/119000001…
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- axios上传图片,koa2接收保存上传的图片,lrz在上传前压缩图片
- SpringMVC教程--图片上传
- 前端图片压缩及上传
- 前端实现图片压缩上传
- php+WebUploader图片批量上传
- 一个简单美丽的图片上传工具
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
The Shallows
Nicholas Carr / W. W. Norton & Company / 2010-6-15 / USD 26.95
"Is Google making us stupid?" When Nicholas Carr posed that question, in a celebrated Atlantic Monthly cover story, he tapped into a well of anxiety about how the Internet is changing us. He also crys......一起来看看 《The Shallows》 这本书的介绍吧!