最近 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
Related