[开发手记] 人人网开放平台不使用表单上传照片

人人网开放平台、新浪微博开放平台、腾讯开放平台中，照片上传API均要求采用采用multipart/form-data编码方式提交。但是在有些场合中，用表单获取文件是一件比较困难的事情，比如在客户端上，用 Canvas 生成了一幅图片，希望把它上传到以上社交网络的相册该怎么办呢？

第一种方法是使用显式的表单，将 Canvas 生成的图片保存到本地，具体操作方法见我的另一篇博客如何将Canvas中的内容保存为本地图片。然后使用
<input type=”file”> 控件，载入这幅图片，并上传到人人网，就像人人网开放平台提供的 JavaScript SDK 一样。

但是这种方法存在一个问题，根据W3C标准，<input type=”file”> 这个对象的 value 属性是只读的，也就是说，不能通过 JavaScript 来改变其值。参见W3School的FileUpload对象的教程，为安全起见，FileUpload对象不允许HTML作者和JavaScript程序员设定value值，也就是说，这个值必须由用户手动指定。这样，使用这种方法就彻底断绝了一键自动上传的技术路径。

那么该怎么办呢，参阅人人网的技术文档之后，认为唯一的出路就是模拟multipart
/ form-data请求，那么如何才能模拟该请求呢？ 我想到了ajax。

但是ajax也彻底断绝了这条技术道路，ajax基于XMLHTTPRequest技术，而这项技术的很大一个遗憾就是无法传送文件。就在我走投无路的时候，知乎上一位高人指点：用XML
HTTP Request Level 2。

XMLHttpRequest Level 2是HTML5的新特性，其目的就是弥补XMLHttpRequest在文件传输中的不足。以往使用XMLHttpRequest来传送文件都是使用overrideMimeType()来欺骗浏览器达到传送二进制文件的目的。但是使用Level 2就不需要这样藏着掖着了，Level 2在send()方法中添加了许多对文件的支持，比如：

void send();

void send(ArrayBuffer data);

void send(Blob data);

void send(Document data);

void send(DOMString? data);

void send(FormData data);

其中，FormData是一个Level 2新支持的接口，它允许发送key-value对数据，同时允许这些数据可以是文件，请求格式即multipart/form-data。

FormData的使用方法如下：

fd = new FormData();

fd.append(name, value, [filename]);

处理append方法是这样进行的：先将name赋值；再将value赋值；如果value的类型是字符串，那么就将键值对的type设为text，如果是Blob（参见HTML5的BlobBuilder），则将键值对的type设为file； 如果类型是file，用这种规则定义文件名，优先为filename字段，如果为空，则为Blob的文件名，如果为空，则为’blob’。

最后使用XMLHttpRequest对象req时，只需要使用：

req.send(fd);

这么轻松就解决问题了，下面上实际代码：

renren.authorize(function(){

access_token = renren.getAccessToken();

if (window.console) {

console.log(access_token);

}

// 下列代码是为了产生sig

var params = {};

params['access_token'] = access_token;

params['call_id'] = new Date().valueOf();

params['method'] = "photos.upload";

params['v'] = "1.0";

params['format'] = "json";

params['caption'] = caption;

var param_array = [];

//遍历表单中调用接口需要的参数，并拼装成"key=value"形式压入数组

for (var key in params){

param_array.push(key + "=" + params[key]);

}

// 下列函数 generateSigFromArray 来自人人网的demo

var sig = generateSigFromArray(param_array, secret_key);

params['sig'] = sig;

// 定义FormData

var myForm = new FormData();

// 从 Canvas 中取得数据，dataURItoBlob()见上一篇博客

var canvas = $("#canvas")[0];

var canvasToDataURL = canvas.toDataURL('image/png');

var bb = dataURItoBlob(canvasToDataURL);

myForm.append('method', params['method']);

myForm.append('access_token', params['access_token']);

myForm.append('call_id', params['call_id']);

myForm.append('v', params['v']);

myForm.append('caption', params['caption']);

myForm.append('format', params['format']);

myForm.append('sig', params['sig']);

// append一个文件

myForm.append('upload', bb, 'renren.png');

// 定义一个 XMLHttpRequest 对象

var req = new XMLHttpRequest();

req.open("POST", "http://api.renren.com/restserver.do", true);

req.onreadystatechange = RequestCallBack;

req.send(myForm);

function RequestCallBack(){

if (req.readyState == 4){//DONE

// 此处可以查看 req.status 和req.response 并进行处理了。

}

}

}

参考文档：

XMLHttpRequest,
Editor’s Draft 14 May 2012

XMLHttpRequest,
MDN

FormData,
MDN