只有一个文件在我的多个图像预览javascript中显示预览

Question

我在javascript中有一个问题。我在javascript中显示多个文件选择的预览。它适用于一个文件输入，如果我插入另一个文件输入它不显示预览。我是javascript的新手，请帮帮我

脚本：

<script type="text/javascript">

window.onload = function(){

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

    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 = "<input type='text' class='form-control' placeholder='Enter your file name' name='file_name[]''></br><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");
}
}


window.onload = function(){

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

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

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

        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 = "<input type='text' class='form-control' placeholder='Enter your file name' name='file_name[]''></br><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");
}
}


</script>

HTML：

<form method="POST" action="" enctype="multipart/form-data">
<article>
<?php 

    if(isset($aquery)){
        echo $aquery;
    }

?>
    <label for="files">Select multiple files: </label>
    <input id="files1" type="file" name="gallery[]" multiple/>

    <output id="result" />


     <label for="files">Select multiple files: </label>
    <input id="files2" type="file" name="floorplan[]" multiple/>
    <input type="submit" name="submit" value="submit">
    <output id="result1" />


</article>
</form>

在这里我有两个文件区分Id，它只显示一个文件的预览。我想要显示这两个文件。有没有其他想法来解决这个问题