javascript - 使用angularjs加载多个图片文件

Question

我发现这很有用link它展示了如何使用指令从本地电脑加载图片(新手w/Angular )。但我不知道在哪里修改它以显示所选图像。我怎样才能做到这一点？我发现很多这样的例子只列出了文件名。

我找到了这个approach它加载文件，我将其调整为加载多个文件。这样就不会使用 Angular 。

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 上传文件，只需询问 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 {
	margin-top: 0;
}

img {
  max-width: 100%;
}

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

<div id="page-wrapper">

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

</div>