用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加载多个图片文件

回答

相关问题