html5 filereader - 我如何手動創建文件列表？

Question

我會用垃圾圖標編寫圖片上傳器。

我該如何使用jQuery爲每個循環創建一個文件列表？

的standardcode對HTML5的FileReader工作：

function handleFileSelect(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 
    files = evt.target.files || evt.dataTransfer.files; 
    for (var i = 0, f; f = files[i]; i++) { 
     if (!f.type.match('image.*')) { 
      continue; 
     } 
     reader = new FileReader(); 
     // Closure to capture the file information. 
     reader.onload = (function (theFile) { 
      return function (e) { 
       var img = new Image(); 
       img.onload = function() { 
        $('#output').append("<img data-rotate='270' src='" + e.target.result + "'>"); 
       } 
       img.src = e.target.result; 
      }; 
     })(f); 
     //Read in the image file as a data URL. 
     reader.readAsDataURL(f); 
    } 
} 

上傳funcion：

function upload_files() { 
    //i need a new filelist with jquery $('#allpicturediv').each(function(){ 
    //newfiles ..... 
    for (var i = 0, f; f = newfiles[i]; i++) { 
     upload_file_now(f); 
    } 
} 

function upload_file_now(f) { 
    //Do the actual uploading 
    var XHR = new XMLHttpRequest(); 
    XHR.open('PUT', '...../upload.php', true); 
    //Send the file details along with the request 
    .......... 
    XHR.send(f); 
} 

的問題是，當用戶刪除照片，是文件列表不是更多的電流。

我想我需要一個腳本來創建一個新的文件列表，在upload_files()函數。

怎麼能解決這個問題？我已經頭痛了。

Answer 1

我創建了這段代碼，它的功能很好。

首先，讓我們創建一個小功能來確定的文件類型的選擇：

function openFile(file) { 
    var extension = file.substr((file.lastIndexOf('.') +1)).toLowerCase();; 
    switch(extension) { 
     case 'jpg': 
     case 'png': 
     case 'gif': 
      return 'image'; 
     break;       
     case 'zip': 
     case 'rar': 
      return 'zip'; 
     break; 
     case 'xls': 
     case 'xlsx': 
     case 'ppt': 
     case 'pptx': 
     case 'doc': 
     case 'docx': 
     case 'pst': 
      return 'office'; 
     break; 
     case 'pdf': 
      return 'pdf'; 
     default: 
      return 'other'; 
    } 
}; 

我們稍後會調用它。

然後去輸入型「文件」的情況下，我幾乎在每一行添加註釋：

var url = window.URL || window.webkitURL; 
     $("div.upload input[type='file']").change(function() { // Every time we selected a file 

      var input = $(this)[0]; 
      for (var i = 0; i < input.files.length; i++) { // We run a "for" loop for each element 

       var thisClass = openFile(input.files[i].name); // We run the functione above to know the type of file 


       if(thisClass != 'image')  { // if there's not an image, we create anything else 

        // On thi example we create a <p> with the class of de element (PDF, XLSX, DOCX, Etc) 
        // Later with css we can create an icon based on the class 
        $(this).closest('.upload_container').find(".fileName").append('<p class="' + openFile(input.files[i].name) +'">'+input.files[i].name+'</p>'); 
       }else { // But if there's an image then lets do this: 

        var chosen = this.files[i]; //We select the file 
        var image = new Image(); // Create an new image 

        var imageName = input.files[i].name; // Get the name of the file 

        image.onload = function() { // CREATE STEP 2.- When we creat the image do anything you want 
         //alert('Width:'+this.width +' Height:'+ this.height+' '+ Math.round(chosen.size/1024)+'KB'); 

         var imageWidth = parseInt(this.width); 
         var imageHeight = parseInt(this.height); 


         if(imageWidth < minWidth || imageHeight < minHeight) { 

          // We can send alerts or something for the size. 

          alert("La imágen " + imageName + " es más pequeña de lo requerido. Se requiere una imagen con un ancho mínimo de " + minWidth + "px y un alto mínimo de " + minHeight + "px."); 
         } 

        }; 

        image.src = url.createObjectURL(chosen); // We are creating the image so go to CREATE STEP 2 

        // Now we create an div width the background of the image created before 
        $(this).closest('.upload_container').find(".fileName").append('<div class="thumbnailImage" style="background-image:url(' + image.src +');"></div>');      
       } 

      } 

     }); 

我希望它可以幫助你！

Answer 2

http://www.chatle.de/P1.jpg

這個很好用。我會刪除圖片：

http://www.chatle.de/P2.jpg

，點擊上傳（hochladen）。

問題是，第2張圖片（來自P1.jpg）還沒有在文件列表中。該文件列表具有「只讀」模式。還需要一個新的上傳功能列表。 （upload_files（））（和我會添加其他信息（對於圖片，我的英語註釋，旋轉數...）

for (var i = 0, f; f = newfiles[i]; i++) { 
    upload_file_now(f,myaddstrings); 
}