你好,我有以下代码
function fileValidation() {
var fileInput = document.getElementById('filech');
var filePath = fileInput.value;
var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
if (!allowedExtensions.exec(filePath)) {
alert('error .jpeg/.jpg/.png/.gif ');
fileInput.value = '';
return false;
} else {
//Image preview
if (fileInput.files && fileInput.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById('imagePreview').innerHTML = '<img src="' + e.target.result + '"/>';
};
reader.readAsDataURL(fileInput.files[0]);
}
}
}
<input id="filech" type="file" name="file_img[]" multiple onchange="return fileValidation()" />
<div id="imagePreview"></div>
上传照片的方式
<input id="filech" type="file" name="file_img[]" multiple onchange="return fileValidation()" />
然后显示
<div id="imagePreview"></div>
我想显示所有图片而不是一张
这里如何使用循环,谢谢大家
最佳答案
正如您所说,您需要一个循环,最简单的方法是使用 for
循环,如下所示:
for (var i = 0; i < fileInput.files.length; i++) {
if (fileInput.files && fileInput.files[i]) {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById('imagePreview').innerHTML += '<img src="' + e.target.result + '"/>';
};
reader.readAsDataURL(fileInput.files[i]);
}
}
注意:
请注意,我将其更改为 document.getElementById('imagePreview').innerHTML +=
,因此它会继续打印所有迭代的图像,否则它只会用最后的图像内容覆盖预览.
但最佳做法是在每次迭代时创建一个 img
元素并将其附加到预览 div:
for (var i = 0; i < fileInput.files.length; i++) {
if (fileInput.files && fileInput.files[i]) {
var reader = new FileReader();
reader.onload = function(e) {
var img = document.createElement("img");
img.src = e.target.result;
document.getElementById('imagePreview').appendChild(img);
};
reader.readAsDataURL(fileInput.files[i]);
}
}
演示:
function fileValidation() {
var fileInput = document.getElementById('filech');
var filePath = fileInput.value;
var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
if (!allowedExtensions.exec(filePath)) {
alert('error .jpeg/.jpg/.png/.gif ');
fileInput.value = '';
return false;
} else {
//Image preview
for (var i = 0; i < fileInput.files.length; i++) {
if (fileInput.files && fileInput.files[i]) {
var reader = new FileReader();
reader.onload = function(e) {
var img = document.createElement("img");
img.src = e.target.result;
document.getElementById('imagePreview').appendChild(img);
};
reader.readAsDataURL(fileInput.files[i]);
}
}
}
}
<input id="filech" type="file" name="file_img[]" multiple onchange="return fileValidation()" />
<div id="imagePreview"></div>
关于javascript - 如何在文件输入更改事件中使用循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48989578/