2013-02-07 154 views
1

我使用下面的jquery插件來上傳文件。jQuery - 創建多個實例

http://www.jscripts.info/mfupload.php

這對於單個上傳框的偉大工程。我通過將ID更改爲類來嘗試多個上傳框,但沒有運氣。

這是它如何初始化函數,

$(document).ready(function() { 
    //function AjaxUpload($posturl,fieldname,formname){ 
     var errors=""; 
     //alert($("div.uploadaction").html()); 
     $('#upload').mfupload({ 

      type  : '', //all types 
      maxsize  : 20, 
      post_upload : $("div.uploadaction").html(), 
      folder  : "./", 
      ini_text : "<div class='halfmargin'></div><span>Click/Drag your logo file here</span>", 
      over_text : "<div class='halfmargin'></div><span class='drop'>Drop Here</span>", 
      over_col : 'white', 
      over_bkcol : 'green', 

      init  : function(){  
       $("#uploaded").empty(); 
      }, 

      start  : function(result){  
       $("#uploaded").append("<div id='FILE"+result.fileno+"' class='files'>"+result.filename+"<div id='PRO"+result.fileno+"' class='progrez_img'><img src='/images/ajax-loader.gif' /></div></div>"); 
      }, 

      loaded  : function(result){ 
       $("#PRO"+result.fileno).remove(); 
       $("#FILE"+result.fileno).html("<div class='smallpadding'>Uploaded: "+result.filename+" ("+result.size+")<input type='hidden' name='hdnfilename[]' value='"+result.filename+"' /></div>"); 
       //$('#'+formname).append('<input type=\"hidden\" name=\"hdnfilename[]\" value=\"' +result.filename+ '\">');  

/*    <input type='hidden' name='hdnfilename[]' value='"+result.filename+"' />  
*/   }, 

      progress : function(result){ 
       $("#PRO"+result.fileno).css("width", result.perc+"%"); 
      }, 

      error  : function(error){ 
       errors += error.filename+": "+error.err_des+"\n"; 
      }, 

      completed : function(){ 
       if (errors != "") { 
        alert(errors); 
        errors = ""; 
       } 
      } 
     }); 

    }) 

請幫我創建多個上傳框。

問候。

+0

jquery文件上傳插件是可能的 – mikakun

+0

是否支持拖放功能,如果有,請給我一個鏈接供參考。 – user1915190

+0

查看編輯答案 – mikakun

回答

1

如果該插件允許多個實例來

$(".upload").each(function(i,e) { 

     $("#"+e.id).mfupload({//.. 
       }); 

     }); 

,或者嘗試一個更好的(IMO)/更靈活的插件:http://blueimp.github.com/jQuery-File-Upload/

(使用所提供的用戶界面之前,練習基本的插件設置開始/模板選項)

+0

非常感謝,我會試試這個插件 – user1915190

1

您可以使用一個類將插件應用於多個元素,但代碼使用該元素的id,因此每個元素仍然必須具有一個id。