最近在使用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直接上传多图,也没时间单独修改测试,所以仅分享下思路,待闲下来再进一步测试,有问题欢迎指正。