첨부 된 기능을위한 최상의 다중 이미지 업 로더

Question

이 제목을 더 자세히 설명하겠습니다. 내가 찾고있는 것은 이미지를 업로드하는 이미지 업 로더 (약 200 장이 이상적입니다)입니다. 이미지 업 로더가 처리 할 수 ​​있어야합니다 :

가) 진행 표시기
b)는 그 크기와 이제 원본

을 삭제하는 스크립트를 통해 업로드 된 파일 전송의 일종, 나는 이것이 어딘가에 있다고 상상한다. 구글 검색은 나쁜 결과를 낳았다. 누구나 잘 작동 할 수있는 경험이 있습니까? 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)와 ​​함께이 작업을 수행 할 수 있습니다.

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