HTML5预览图片、异步上传文件

注意啦：本文的代码都是以JQuery为示例，jq_开头的变量都是jq对象。

在HTML5中，我们可以在图片上传之前对图片进行预览，就像下面这么做

jq_upload_file.change(function(){
jq_img.attr("src",window.URL.createObjectURL(this.files.item(0)));
jq_div.css("backgroundImage","url("+window.URL.createObjectURL(this.files.item(0))+")");
});//end change

那么异步上传文件，就只需要利用HTML5中的FormData，也就是这样：

$.extend({
AjaxUploadFile:function(url,formData,success,failure){
var oReq = new XMLHttpRequest();
oReq.open( "POST", url , true );
oReq.onload = function(oEvent) {
if (oReq.status == 200)
{
if(typeof success=="function") success(oReq);
}
else
{
if(typeof failure=="function") failure(oReg);
}
};
oReq.send(formData);
}
});

调用：

var form=new FormData();
form.append("pic",jq_upload_file.get(0).files[0]);
//关于这里，其他文章有提到，可以直接传个DOM节点进去，即form.append("pic",jq_upload_file.get(0))
//另外，对于FormData可以将整个表单form的节点传入，形成一个完整的FormData，即var form=new FormData(jq_form.get(0))
$.AjaxUploadFile(
"上传的URL",
form,
function(oReq){
//处理oReq.responseText
}
);

当然，上传之前，可能需要先验证一下文件大小、类型等等：

$.extend({
CheckUploadFile:function(jq_input_file){
if(jq_input_file.get(0).files.item(0).size>300*1024)
{
return "文件大于300KB，无法上传";
}
var allow_pic=["jpg","jpeg","png","gif"];
var flag=false;
for(var i in allow_pic)
{
if(jq_input_file.get(0).files.item(0).type.indexOf(allow_pic[i])!=-1)
{
flag=true;
break;
}
}
return flag?"":"指定的文件格式无法上传";
}
});