複数の画像ファイルをangularjsでロードする

Question

この便利なファイルはlinkで、ローカルPCから画像をロードする方法を示しています。しかし、私はそれを変更して、選択された画像を表示する場所を知らない。どうすればこれを達成できますか？私はこのような多くの例がファイル名のリストだけを見つけたことが分かりました。

このファイルをロードするapproachが見つかりました。複数のファイルを読み込むように変更しました。これにより、角を使用しません。

window.onload = function() { 

    var fileInput = document.getElementById('fileInput'); 
    var fileDisplayArea = document.getElementById('fileDisplayArea'); 


    fileInput.addEventListener('change', function(e) { 
     var file = fileInput.files[0]; 
     var imageType = /image.*/; 

     if (file.type.match(imageType)) { 
      var reader = new FileReader(); 

      reader.onload = function(e) { 
       fileDisplayArea.innerHTML = ""; 

       var img = new Image(); 
       img.src = reader.result; 

       fileDisplayArea.appendChild(img); 
      } 

      reader.readAsDataURL(file); 
     } else { 
      fileDisplayArea.innerHTML = "File not supported!" 
     } 
    }); 

どのような方法が良いでしょうか。私は複数のファイルを読み込んで、最後にbyteArrayとしてアップロードしたい。

Answer 1

以下のコードでは、複数のファイルを選択してウェブページに表示することができます。それらをアップロードするためにFormdataを使用できます。FormDataを使用するリンクはこちらです。 FormDataを使ってファイルをアップロードする方法について説明している投稿もいくつかあります。

window.onload = function(){ 
 
     
 
    //Check File API support 
 
    if(window.File && window.FileList && window.FileReader) 
 
    { 
 
     var filesInput = document.getElementById("fileInput"); 
 
     
 
     filesInput.addEventListener("change", function(event){ 
 
      
 
      var files = event.target.files; //FileList object 
 
      var output = document.getElementById("fileDisplayArea"); 
 
      output.innerHTML=""; 
 
      for(var i = 0; i< files.length; i++) 
 
      { 
 
       var file = files[i]; 
 
       
 
       //Only pics 
 
       if(!file.type.match('image')) 
 
        continue; 
 
       
 
       var picReader = new FileReader(); 
 
       
 
       picReader.addEventListener("load",function(event){ 
 
        
 
        var picFile = event.target; 
 
        
 
        var div = document.createElement("div"); 
 
        
 
        div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" + 
 
          "title='" + picFile.name + "'/>"; 
 
        
 
        output.insertBefore(div,null);    
 
       
 
       }); 
 
       
 
       //Read the image 
 
       picReader.readAsDataURL(file); 
 
      }        
 
      
 
     }); 
 
    } 
 
    else 
 
    { 
 
     console.log("Your browser does not support File API"); 
 
    } 
 
} 
 

html { 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    font-size: 100%; 
 
    background: #333; 
 
} 
 

 
#page-wrapper { 
 
    width: 600px; 
 
    background: #FFF; 
 
    padding: 1em; 
 
    margin: 1em auto; 
 
    min-height: 300px; 
 
    border-top: 5px solid #69c773; 
 
    box-shadow: 0 2px 10px rgba(0,0,0,0.8); 
 
} 
 

 
h1 { 
 
\t margin-top: 0; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
} 
 

 
#fileDisplayArea { 
 
    margin-top: 2em; 
 
    width: 100%; 
 
    overflow-x: auto; 
 
}

<div id="page-wrapper"> 
 

 
\t <h1>Image File Reader</h1> 
 
\t <div> 
 
\t \t Select an image file: 
 
\t \t <input type="file" id="fileInput" multiple> 
 
\t </div> 
 
\t <div id="fileDisplayArea"></div> 
 

 
</div>