javascript - 上传前的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

标签： javascriptnode.js

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>