Biegral Blog

今天遇到一个需求：通过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.readAsDataUR

sendRequest(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/51921167

http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html