上传前的javascript预览图像

Question

我在img框中按顺序做了一个代码。 但是如果if(file.size > 1M)很大的话，img框中就会出现空格。 如何让下一张图片没有空格？

**

上传前的javascript预览图像

**

<form class="my_form">
<input type="file" id="fileElem" multiple accept="image/*" 
onchange="handleFiles(this.files)">
<label class="button" for="fileElem">Select Images</label>
<div id="gallery">
<img id="**imgg0**" class="imgg">
<img id="**imgg1**" class="imgg">
<img id="**imgg2**" class="imgg">
<img id="**imgg3**" class="imgg">
<img id="**imgg4**" class="imgg">
</div>               
</form>
<script>
function handleFiles(files) {
var files = [...files]
var imgs = document.querySelectorAll('img');
files.forEach(function(file, index){
if(file.size > 1000000){
delete file[index];
} else{ 
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onloadend = function() {
var img = **document.getElementById('imgg'+index)**;
img.src = reader.result;  
}
} 
})
}
</script>
[enter image description here][1]


 [1]: https://i.stack.imgur.com/0dJ45.png

Answer 1

检查我的解决方案。

 function handleFiles(files) { var imgs = document.querySelectorAll('img'); //Image element undex let imgIndex=0; //Loop through all the images for(var i = 0; i < files.length; i++){ var reader = new FileReader(); reader.onload = function(e) { var img = document.getElementById('imgg'+imgIndex); img.src = e.target.result; imgIndex++; } reader.readAsDataURL(files[i]); } }

 <form class="my_form"> <input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)"> <label class="button" for="fileElem">Select Images</label> <div id="gallery"> <img id="imgg0" width="10%" class="imgg"> <img id="imgg1" width="10%" class="imgg"> <img id="imgg2" width="10%" class="imgg"> <img id="imgg3" width="10%" class="imgg"> <img id="imgg4" width="10%" class="imgg"> </div> </form>

Answer 2

多图像预览的简单解决方案。 这会为文件控件中选择的尽可能多的图片动态创建 img 占位符

<div id="container01"></div>
<input id="filer" type="file" onchange="preview()" multiple="multiple" />

<script>
    function preview() {
        var element = document.getElementById("container01");
        for (var i = 0; i < event.target.files.length; i++) {
            var imgi = document.createElement('img'); // variable imgi has i loop counter   
            imgi.src = URL.createObjectURL(event.target.files[i]);
            imgi.style.width = "100px";
            imgi.style.height = "100px";
            element.appendChild(imgi); // add new preview to container

            var space = document.createTextNode(" "); // spacer between imgs
            element.appendChild(space); // add space for horizontal preview
//          var linebreak = document.createElement('br'); // add line break <br/>   
//          element.appendChild(linebreak);
            
            
        }
    }
</script>