通过FormData上传bolb/image/file对象

FormData是HTML原生支持的对象，它主要用来提交表单信息，与其它表单提交不同的是，它可以提交二进制数据。比如：此前我们提交文件到服务器都需要通过form表单来完成，而现在我们就可以直接通过FormData对象来完成。

使用FormData对象的好处是可以通过编程自主的添加需要提交的数据，而不需要提前设置好一个form表单，更加灵活。另外form表单提交文件都是通过<file>元素来实现的，而FormData可以提交任何形式的文件。比如：filey元素内容、img元素的内容、canvas元素的内容等。

下面就来介绍下如何通过FormData来发送不同的元素内容。

1、发送普通字符串

var fd = new FromData();
fd.append('name1', 'value1');
fd.append('name2', 'value2');

var xhr = new XMLHttpRequest();
xhr.open('POST', '/test', true);
xhr.send(fd);

2、发送<file>内容

var fd = new FromData();
var f1 = document.getElementById('file');
fd.append('file', f1.files[0]);

var xhr = new XMLHttpRequest();
xhr.open('POST', '/test', true);
xhr.send(fd);

3、发送<img>内容

function imageToCanvas(src, cb){
	var canvas = document.createElement('CANVAS');
	var ctx = canvas.getContext('2d');
	var img = new Image();
	img.src = src;
	img.onload = function (){
		canvas.width = img.width;
		canvas.height = img.height;
		ctx.drawImage(img, 0, 0);
		cb(canvas);
	};
}

var fd = new FromData();
var img1 = document.getElementById('img');
imageToCanvas(img1.src, function(canvas){
    canvas.toBlob(function(blob){
        fd.append('img', bolb, '1.png');
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/test', true);
        xhr.send(fd);
    }, 'image/png');
});

4、发送<canvas>内容

var fd = new FromData();
var canvas = document.getElementById('canvas');
canvas.toBlob(function(blob){
    fd.append('img', bolb, '1.png');
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/test', true);
    xhr.send(fd);
}, 'image/png');

其中img转blob对象还可以通过请求url下载二进制的方式获得。

通过FormData上传bolb/image/file对象

猜你喜欢