支持附加功能的最佳多圖像上傳器

Question

讓我更好地解釋這個標題。 我正在尋找的是一個圖片上傳器，上傳多個圖像（大約200將是理想的）。圖像上傳需要能夠處理：

一）某種進度指示器
二）通過尺寸他們並刪除原件

現在的腳本發送上傳的文件 的，我想這是在那裏，我的谷歌搜索已經取得了不好的結果。 有沒有人有經驗的東西，將工作好？ jQuery將是理想的，但沒有必要。

Answer 1

您與Flash的聯繫很緊密，可以讓用戶對上傳進度給出可視反饋。你可以在jQuery上設計整個UI，但最終它會是一個Flash組件，將文件發送到服務器並報告上傳進度。

即到目前爲止，測試和標準程序最多。

Gmail使用它。

編輯：這裏是我使用的自定義解決方案的源代碼。

<mx:Script> 
    <![CDATA[ 
     // initializes properties defined by user can be reset on runtime 
     //private const FILE_UPLOAD_URL:String = "http://carloscidrais.netxpect.dev/uploader.php"; 
     //private var imagesFilter:FileFilter = new FileFilter("Allowed Files", "*.jpg;*.jpeg;*.gif;*.png"); 

     // for calling external javascript 
     import flash.external.*; 

     // initializes properties for the upload streams 
     private var myFileRef:FileReferenceList = new FileReferenceList(); 
     private var item:FileReference; 
     private var fileListInfo:Array = new Array(); 
     private var fileListDoneSoFar:int = 0; 
     private var fileNumber:int = 0; 


     // Runs when user clicks the upload button 
     // ** 
     // ** 
     private function browseAndUpload():void { 
      myFileRef = new FileReferenceList(); 
      myFileRef.addEventListener(Event.SELECT, selectHandler); 

      // get user variables 
      var params:URLVariables = new URLVariables(); 
      params.allowed_files = Application.application.parameters.allowed_files; 
      var imagesFilter:FileFilter = new FileFilter("Allowed Files", params.allowed_files); 

      myFileRef.browse([imagesFilter]); 
      uploadCurrent.text = ""; 

      progressBar.visible = false; 
      cancelButton.visible = false; 
     } 


     // Runs when user clicks the cancel button 
     // ** 
     // ** 
     private function cancel():void { 
      item.cancel(); // cancels current upload item 
      progressBar.label = "canceled"; 
      uploadButton.enabled = true; 
      cancelButton.visible = false; 
      reset(); 
     } 


     // Resert all variables to allow files to be sent again 
     // ** 
     // ** 
     private function reset():void { 
      fileListInfo.length = 0; 
      fileNumber = 0; 
      fileListDoneSoFar = 0; 
     } 


     // Nice error IO event handler 
     // ** 
     // ** 
     private function ioErrorHandler(evt:IOErrorEvent):void { 
      item.cancel(); 
      uploadButton.enabled = true; 
      cancelButton.visible = false; 
      progressBar.label = "io error"; 
      if(fileListDoneSoFar==0) 
       uploadCurrent.text = "Error: Check upload permissions!"; 
      else 
       uploadCurrent.text = "Error: Check network!"; 
      reset(); 
     } 


     private function javascriptComplete():void { 
      var javascriptFunction:String = "galeryUploadComplete("+Application.application.parameters.opt+")"; 
      ExternalInterface.call(javascriptFunction); 
     }    

     // Counts the total upload size and returns it in bytes 
     // @param Object:FileReferenceList 
     // @return int 
     private function getTotalUploadBytes(files:Object):int { 
      var size:int = 0; 
      for(var i:int = 0; i<files.fileList.length; i++) 
       size += files.fileList[i].size; 
      return size; 
     } 


     // Returns a good byte formating 
     // @param int bytes 
     // @return string nice value 
     private function returnHumanBytes(size:int):String { 
      var humanSize:String = ""; 
      if(size>1048576) { 
       numberFormater.precision = 2; 
       humanSize = numberFormater.format(size/1024/1024)+"MB"; 
      } 
      else { 
       numberFormater.precision = 0; 
       humanSize = numberFormater.format(size/1024)+"KB"; 
      } 
      return humanSize; 
     } 


     // Handler that runs when user selects the files 
     // ** 
     // ** 
     private function selectHandler(evt:Event):void { 
      try { 
       progressBar.visible = true; 
       cancelButton.visible = true; 
       progressBar.label = "0%"; 
       uploadButton.enabled = false;     

       fileListInfo["numfiles"] = myFileRef.fileList.length; 
       fileListInfo["totalsize"] = getTotalUploadBytes(myFileRef); 

       uploadFile(); 

      } catch (err:Error) { 
       uploadCurrent.text = "Error: zero-byte file"; 
      } 
     } 


     // When all files are uploaded resets some variables 
     // ** 
     // ** 
     private function allFilesUploaded():void { 
      progressBar.label = "100%"; 
      if(myFileRef.fileList.length==1) 
       uploadCurrent.text = "File uploaded successfully!"; 
      else 
       uploadCurrent.text = "All "+myFileRef.fileList.length+" files uploaded successfully!"; 

      uploadButton.enabled = true; 
      cancelButton.visible = false; 
      reset(); 
     } 


     // Uploads all files that were inserted in a linear order 
     // @param null 
     // @return void   
     private function uploadFile():void { 
      if(fileNumber>=fileListInfo["numfiles"]) { 
       allFilesUploaded(); 
      } 
      else { 
       item = myFileRef.fileList[fileNumber]; 
       uploadCurrent.text = item.name; 
       item.addEventListener(ProgressEvent.PROGRESS, progressHandler); 
       item.addEventListener(Event.COMPLETE, completeHandler); 
       item.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler); 

       // get user variables 
       var params:URLVariables = new URLVariables(); 
       params.opt = Application.application.parameters.opt; 
       params.ssid = Application.application.parameters.ssid; 
       params.upload_url = Application.application.parameters.upload_url; 

       // makes this a post request and sends allong both the ID and PHP_SESSION along 
       var request:URLRequest = new URLRequest(params.upload_url); 
       request.method = URLRequestMethod.POST; 
       request.data = params; 

       item.upload(request); 
       fileNumber++; 
      } 
     } 



     private function progressHandler(evt:ProgressEvent):void { 
      uploadCurrent.text = evt.currentTarget.name; 

      progressBar.setProgress(fileListDoneSoFar+evt.bytesLoaded, fileListInfo["totalsize"]); 
      progressBar.label = numberFormater.format(((fileListDoneSoFar+evt.bytesLoaded)*100/fileListInfo["totalsize"])*0.98)+"%"; 


     } 

     private function completeHandler(evt:Event):void { 
      javascriptComplete(); 
      fileListDoneSoFar += evt.currentTarget.size; 
      uploadFile(); 
     } 
    ]]> 
</mx:Script> 

<mx:NumberFormatter id="numberFormater" rounding="up" /> 
<mx:Canvas x="0" y="0" width="280" height="70" borderColor="#EFEFEF" backgroundColor="#EFEFEF"> 
    <mx:Button id="uploadButton" label="upload files (max. 50MB)" 
     click="browseAndUpload();" x="2" y="25" fontSize="10" fontFamily="Arial" width="167"/> 
    <mx:Button id="cancelButton" click="cancel();" visible="false" y="25" label="cancel" width="96" fontFamily="Arial" x="182"/> 
    <mx:ProgressBar mode="manual" x="2" y="1" id="progressBar" visible="false" labelPlacement="center" width="276" height="19" fontSize="9"/> 
    <mx:Label id="uploadCurrent" x="2" y="51" width="276" text=""/> 
</mx:Canvas> 

Answer 2

你可以用SWFUpload的（谷歌的SWFUpload）做到這一點。

使用JQ SWFUpload的插件將使其更容易在代碼中使用：

http://blogs.bigfish.tv/adam/2009/06/14/swfupload-jquery-plugin/