利用 FormData 对象发送 Key/Value 对的异步请求

最新推荐文章于 2022-01-20 18:59:33 发布

weistar103

最新推荐文章于 2022-01-20 18:59:33 发布

阅读量181

点赞数

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/weistar103/article/details/84430842

版权

HTML5 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

文章源自:http://www.oschina.net/translate/using-formdata-to-send-forms-with-xhr-as-keyvalue-pairs?cmp

利用 FormData 对象发送 Key/Value 对的异步请求

使用Key/Value对和FormData能够轻易地通过XMLHttpRequest指定要传递什么数据，它是一个非常强大的发送数据到服务器的方法。然而，似乎很多人都忽略了这个闪光点，所以，我认为我要在这里指出。

基础

通常的方法是你创建一个 FormData 对象。然后你使用append方法来加入任何额外的key和他们的值。就像这样：

var form = new FormData();
form.append("myName", "Robert");

然后你只需使用XMLHttpRequest（XHR）的send方法来发送：

var xhrForm = new XMLHttpRequest();
xhrForm.open("POST", "getfile.php");
xhrForm.send(form);

对于FormData，有趣的是不限制你加入字符串，但是实际上还有许多不同的类型

字符串
数字（发送的时候会转换为字符串）
文件
二进制对象（BLOB）

要想能够在服务器端处理一个FormData的表单，要知道的重点是和一个multipart/form-data编码的常规表单一样发送。

加入文件和二进制对象（blob)

如果你想加入一个文件，最简单的方法是访问通过一个type="file"的输入元素选择的文件：

form.append("theFile", fileInput.files[0]);

加入一个二进制对象(blob)

在发送和接收值方面，使用二进制对象（blob)是十分强大的。一个二进制对象(blob)可以手动通过它的内容或者类型的引用去创建：

form.append("blobbie", new Blob([imgAsBlobRef], {"type": "image/png"}));

创建你的二进制对象（blob）的内容：

你也可以自己穿件一个二进制对象（blob）的内容：

var xmlForBlob = ["Robert"],
    xmlBlob = new Blob(xmlForBlob, {"type" : "text/xml"});

form.append("xmlParts", xmlBlob);

在页面上获取图像和创建二进制对象（blob）

另外，你也可以在页面上通过XHR来获取一个图像然后通过FormData来发送：

// Getting a file through XMLHttpRequest as an arraybuffer and creating a Blob
var rhino = document.querySelector("#rhino");
if (rhino) {
    var xhr = new XMLHttpRequest(),
        blob;

    xhr.open("GET", "rhino.png", true);
    xhr.responseType = "blob";

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            blob = xhr.response;
            var form = new FormData();
            form.append("blobbie", blob);
             
            var xhrForm = new XMLHttpRequest();
            xhrForm.open("POST", "getfile.php");
            xhrForm.send(form);
        }
    };
    // Send XHR
    xhr.send();
}

使用Web Activity

我以前在Mozilla Hacks博客上写过一篇关于Web Activities的文章, 使用里面的方法，你可以访问设备的相机，拍照，然后得到一个二进制对象（blob）的返回结果。

一旦你获取到它（blob），你就可以把它发送到服务器。在这种情况下，我们会通关过Web Activity拍照，通过FormData发送二进制对象到服务器，然后从服务器获得返回的图像，截止在当前页面中呈现图片：

var pick = new MozActivity({
     name: "pick",
     data: {
         type: ["image/png", "image/jpg", "image/jpeg"]
     }
 });

pick.onsuccess = function () {    
    var form = new FormData();
    form.append("blobbie",  this.result.blob);
    
    var xhrForm = new XMLHttpRequest();
    xhrForm.open("POST", "getfile.php");
    xhrForm.send(form);

    xhrForm.onreadystatechange = function () {
        if (xhrForm.readyState === 4) {
            var img = document.createElement("img");
            img.src = xhrForm.response;

            var imagePresenter = document.querySelector("#image-presenter");
            imagePresenter.appendChild(img);
            imagePresenter.style.display = "block";
        }
    };
};

在服务器上读取表单

记得文章开头的地方我提到过的表单是在multipart/form-data的编码下发送。这里就是你怎样去读取通过FormData传送的名称、值和二进制对象的内容的方法：

<?php 
    $fileName = $_FILES['blobbie']['name'];
    $fileType = $_FILES['blobbie']['type'];
    $fileContent = file_get_contents($_FILES['blobbie']['tmp_name']);
    $dataURL = 'data:' . $fileType . ';base64,' . base64_encode($fileContent);
    echo $dataURL;
?>

上面的代码是我在Eric Bidelman的一个gist里的发现的。通常，你应该能用任何的服务器端语言来做到这点。这里选择PHP，只是因为它已经在大多数服务器上运行了。

一个完整的demo

我把通过XHR获取一个在页面上的图像、通过FormData来传送它、读取内容以及返回一个图像能够再次显示在页面的URL放在了一个完整的例子中。

一般来说，这是一个展示怎样来回发送消失的实践。

可以在以下的URL中获取例子 https://github.com/robnyman/robnyman.github.com/tree/master/html5demos/formdata

（大概由于一些原因，GitHub页面不能让你运行PHP代码来读取文件内容，但是在FormData GitHub page 里可以看到带有一个不完整图像的页面/布局）。

(function () {
    // Getting a file through XMLHttpRequest as an arraybuffer and creating a Blob
    var rhino = document.querySelector("#rhino");
    if (rhino) {
        var xhr = new XMLHttpRequest(),
            blob;

        xhr.open("GET", "rhino.png", true);
        /*
            Set the responseType to "blob". 
            If it isn't supported in the targeted web browser, 
            use "arraybuffer" instead and wrap the response 
            with new Uint8Array() below
        */
        xhr.responseType = "blob";

        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                /* 
                    Create a blob from the response
                    Only needed if the responseType isn't already blob
                    If it's "arraybuffer", do this:
    
                    blob = new Blob([new Uint8Array(xhr.response)], {type: "image/png"});
                */
                blob = xhr.response;
                var form = new FormData();
                form.append("blobbie", blob);
                 
                var xhrForm = new XMLHttpRequest();
                xhrForm.open("POST", "getfile.php");
                xhrForm.send(form);

                xhrForm.onreadystatechange = function () {
                    if (xhrForm.readyState === 4) {
                        console.log(xhrForm.response);
                        rhino.src = xhrForm.response;
                    }
                };
            }
        };
        // Send XHR
        xhr.send();
    }
})();

PHP 代码

<?php 
    $fileName = $_FILES['blobbie']['name'];
    $fileType = $_FILES['blobbie']['type'];
    $fileContent = file_get_contents($_FILES['blobbie']['tmp_name']);
    $dataURL = 'data:' . $fileType . ';base64,' . base64_encode($fileContent);
    echo $dataURL;
?>