用angularjs加載多個圖片文件

我發現這個有用的link顯示如何從您的本地電腦加載一個指令（新手w /角度）的圖片。但我不知道在哪裏修改它以顯示所選圖像。我怎麼能做到這一點？我發現很多這樣的例子只列出了文件名。用angularjs加載多個圖片文件

我發現這個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。

來源

2016-09-10 Maximus Decimus

這裏是一個想法：使用'URL.createObjectURL（文件）'，而不是讀它爲base64 – Endless

這裏是另一個想法：使用'接受= 「圖像/ *」'[屬性]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept），因此用戶只能從對話框中選擇圖像 – Endless

下面的代碼將允許選擇多個文件並將它們顯示在網頁上。對於上傳他們，你可以使用Formdata這裏是鏈接使用FormData。你也可以找到幾個解釋如何使用FormData上傳文件的文章，你只需要問問Google。

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>

來源

2016-09-10 04:40:14 Manish

用angularjs加載多個圖片文件

回答

相關問題