重拾cgi——文件上传和cgicc

html中上传文件,只需要表单里面放一个input type=file即可,如果要使用ajax异步上传(下文基于jquery),就需要注意几点(以下操作,部分需要基于html5定义的api):

1、页面上创建一个input元素,type是file。如果一个input需要支持选择多个文件,在标签中增加属性:multiple=”multiple”。(注意,这需要浏览器支持html5,具体文档可以见

2、获取这个元素绑定的已上传文件
[cce lang=”javascript”]
var files = document.getElementById(‘xxx’).files;
[/cce]
先获取元素,通过读取元素的files属性,获取所有已经选择的文件。

3、组装formdata,因为上传文件可能会比较大,所以即使支持多选文件,这里还是分成不同的请求发送。
[cce lang=”javascript”]
for(var i=0;i<array.length;i++) {
var file = files[index];
var formData = new FormData();
formData.append("file", file);
formData.append("id", i+1);
}
[/cce]
这里将每个文件单独组装成一个formdata,里面包含文件内容和一个id。

4、通过jquery发起post请求:
[cce lang=”javascript”]
$.ajax({
type: 'POST',
url: "file/new",
data: formData,
async: true,
cache: false,
processData: false,
contentType: false,
xhr: function() {
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){
myXhr.upload.addEventListener('progress',progressHandlerFunction, false);
}
return myXhr;
},
success: function(data){
if(!data.result) {
progressTag.remove();
$("#" + index).after($('<span style="color:red">'+data.msg+'</span>'));
}
}
});
[/cce]
其中的xhr部分稍后会提到,这里还有两个需要特别注意的地方。首先是processData属性,必须设置为false,其次是contentType必须设置为false。其他后端不清楚,cgicc在处理文件上传(既multipart方式post的时候),必须从http头中读取Content-Disposition属性,只有在jquery里面设置了前面提到的两个属性,才能正确的按照标准协议进行封装,让cgicc读取到正确的内容分隔字符串。

5、锦上添花,增加进度条
[cce lang=”javascript”]
var progressTag = $("<progress/>", {
value: 0,
min: 0,
max: file.size
});
$("#" + index).after(progressTag);

function progressHandlerFunction(evt) {
if (evt.lengthComputable) {
progressTag.attr("max", evt.total);
progressTag.attr("value", evt.loaded);
}
}
[/cce]
这里通过jquery动态的增加了一个progress标签(html5中新增),然后定义了一个handler。之前jquery的ajax函数中看见了,通过获取原生xhr对象,在upload事件上增加handler函数回调,在上传的同时,将具体进度反馈给用户。当然,如果需要,这里也可以绑定download事件。

6、cgicc处理文件
cgicc处理文件和普通表单元素类似,唯一的区别是需要通过cgi.getFile函数来获取,而不是cgi.getElement。
[cce lang=”cpp”]
cgicc::form_iterator idIter = cgi.getElement("id");
cgicc::file_iterator fileIter = cgi.getFile("file");
if(idIter == cgi.getElements().end())
{
//handle error
}
int id = (int)idIter->getIntegerValue();

if(fileIter == cgi.getFiles().end())
{
//handle error
}
std::ofstream of(boost::lexical_cast<std::string>(id));
fileIter->writeToStream(of);
[/cce]
这里忽略了错误处理,通过获取表单元素,作为文件名,直接将文件通过标准库文件输出流ofstream写到磁盘上。

这样,就完成了从页面上选择文件,到后台保存的简单流程。

发表评论

电子邮件地址不会被公开。 必填项已用*标注