[jQuery] AjaxFileUpload : Multiple File Upload plugin

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