[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
  • 多文件上传我目前还用不上,不过这个单文件上传简直太方便了。

  • THX

    有進度顯示嗎?!

  • 這 plugin 是沒有進度顯示,如果需要的話,要搭配 flash 才有此效果。

    例如文章中提到的:
    SWFUpload
    Plupload
    Uploadify

  • SWFUpload能否写点介绍的文章呀。

  • 挖。。。都还没能完全看懂。。。看来还要再学学= =||

  • Kfrico

    請問一下像這種檔案上傳的js可以帶表單裡的資料一起過去給處理檔案的.php處理嗎?

  • 如果要帶表單其他內容過去,就必須修改 js 套件,或者是直接可以在 js 裡面用 ajax 方式把其他資料丟過去

  • Kfrico

    請問一下!如果要在一個div上的捲頁軸上抓去動態的捲軸長度該如何去抓?因為之前抓一個套件發現它只有對在整個視窗下的捲頁軸上有辦法做動態更新!!在div小視窗上就沒有辦抓取長度值

  • Dyt_live

    $(this).attr(‘id’)这个有效吗?我按照你的方法,貌似不能传多个文件…请问是什么问题,谢谢!