入力ファイルに1つずつ画像を挿入することができます。

Question

画像を1つずつ挿入すると、「入力ファイル」は1つの画像のみを読み取ります。

しかし、私は、複数の画像を挿入すると、結果がユーザの入力

window.onload = function() { 
 

 
    //Check File API support 
 
    if (window.File && window.FileList && window.FileReader) { 
 
    var filesInput = document.getElementById("files"); 
 

 
    filesInput.addEventListener("change", function(event) { 
 

 
     var files = event.target.files; //FileList object 
 
     var output = document.getElementById("result"); 
 

 
     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"); 
 
    } 
 
}

article { 
 
    width: 80%; 
 
    margin: auto; 
 
    margin-top: 10px; 
 
} 
 

 
.thumbnail { 
 
    height: 100px; 
 
    margin: 10px; 
 
}

<article> 
 
    <label for="files">Select multiple files: </label> 
 
    <input id="files" type="file" multiple/> 
 
    <div id="result"></div> 
 
</article>

は、複数の画像入力を行ってください、そして1

Answer 1

ずつ場合、その画像な限り読まれますあなたは複数の写真をアップロードしたいと思う。 この方法は、ユーザが一の画面に入ったところ、その後、ユーザーはこれが私の作品、または私は理解していないのです

$(document).ready(function() { 
 
    $(document).on("click", 'input[name="images-post[]"]', function() { 
 
    $('.menu-create-post .mdi-camera').append('<input type="file" name="images-post[]" accept="image/*" multiple="multiple">'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <span class="span-wrapper" style="display: inline-block;"> 
 
    <input type="file" name="images-post[]"/> 
 
    </span> 
 
</div> 
 
<div class="menu-create-post"> 
 
    <div class="mdi-camera"></div> 
 
</div>