最近 survey 一些 AJAX upload plugin by jQuery，或者是一些網路知名 upload opensource: SWFUpload, 以及目前很強大的 Plupload，先來說明 AjaxFileUpload 這個 jQuery Plugin 單一檔案上傳，如果想要簡單方便的單一上傳，我很推薦這個，搭配回傳的 json type 吐出錯誤訊息還蠻好用的，雖然作者給單一上傳的說明，不過還是可以將它改成多檔上傳，也就是多增加 input type=“file” 就可以了，底下介紹一下怎麼實作單一檔案或者是多檔案上傳。
單一檔案上傳 先 include AjaxFileUpload javascript
html:
jQuery code:
function ajaxFileUpload()
{
//這部份可以省略，或者是撰寫當 ajax 開始啟動需讀取圖片，完成之後移除圖片
$("#loading")
.ajaxStart(function(){
$(this).show();
})
.ajaxComplete(function(){
$(this).hide();
});
/*
prepareing ajax file upload
url: the url of script file handling the uploaded files
fileElementId: the file type of input element id and it will be the index of $_FILES Array()
dataType: it support json, xml
secureuri:use secure protocol
success: call back function when the ajax complete
error: callback function when the ajax failed
*/
$.ajaxFileUpload
(
{
url:'doajaxfileupload.php',
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'json',
success: function (data, status)
{
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.msg);
}
}
},
error: function (data, status, e)
{
alert(e);
}
}
)
return false;
}注意 fileElementId 對應到 input file 裡面的 ID 值，取 name 是後端程式需要用到，例如 PHP $_FILES，後端處理回傳 json Type 給 jQuery 處理，json 格式：
{
"error" : 'test',
"msg" : 'upload completed'
}這樣大致上ok了。如果要多檔案上傳，其實就是改 jQuery 部份：html 部份請加上多個 input file
多重檔案上傳
jQuery 部份改成：
$().ready(function() {
$('#uploadfile').click(function(){
$('input:file').each(function(){
$.ajaxFileUpload
(
{
url:'doajaxfileupload.php',
secureuri:false,
fileElementId: $(this).attr('id'),
dataType: 'json',
success: function (data, status)
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.msg);
}
},
error: function (data, status, e)
{
alert(e);
}
}
);
});
});
});
另外也可以參考 jQuery Plugin:
jQuery Multiple File Upload Plugin v1.47
