朴人博客

最近在使用plupload的做图片上传时，有同一个请求上传多张图片的需求，而对于选择多张图片的上传，plupload是分开多次请求的，由于之前使用plupload时多是采用选择即上传的方式，所以没有发现。

翻阅源码，发现有如下一段代码。

// Build multipart request

if (_options.multipart && canSendMultipart) {

xhr.open(_options.http_method, url, true);

// Set custom headers

plupload.each(_options.headers, function(value, name) {

xhr.setRequestHeader(name, value);

});

formData = new o.FormData();

// Add multipart params

plupload.each(plupload.extend(data, _options.multipart_params), function(value, name) {

formData.append(name, value);

});

// Add file and send it

formData.append(_options.file_data_name, chunkBlob);

xhr.send(formData);

} else {

// if no multipart, send as binary stream

url = plupload.buildUrl(_options.url, plupload.extend(data, _options.multipart_params));

xhr.open(_options.http_method, url, true);

if (plupload.isEmptyObj(_options.headers) || !_options.headers['content-type']) {

xhr.setRequestHeader('content-type', 'application/octet-stream'); // binary stream header

}

// Set custom headers

plupload.each(_options.headers, function(value, name) {

xhr.setRequestHeader(name, value);

});

xhr.send(chunkBlob);

}

这下好了，我们可以改造一下组件，在

formData.append(_options.file_data_name, chunkBlob);

这一行加个循环，把当前已选择的图片都追加进去（当然，还要浏览器支持FormData的情况下），随后只需配置multipart参数为true，然后再调用start方法，即可实现批量上传，由于目前项目不兼容IE低版本，已经使用原生FormData直接上传多图，也没时间单独修改测试，所以仅分享下思路，待闲下来再进一步测试，有问题欢迎指正。