试图弄清楚如何一次输入多个文件并将它们排列到 div 中。结果,仅显示数组的最后一张图像。
HTML:
<input type="file" id="imageinput" accept="image/*" onchange="handleFiles(files)" multiple>
<div class="cube-layout-1">
<div id="preview1"></div>
<div id="preview2"></div>
<div id="preview3"></div>
<div id="preview4"></div>
<div id="preview5"></div>
<div id="preview6"></div>
</div>
Javascript:
var j=0;
function counter() {
j++;
return j;
}
function handleFiles(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
var count = counter();
var preview = document.getElementById("preview"+count);
var reader = new FileReader();
reader.onload = (function (preview) {
return function () {
preview.style.backgroundImage = "url(" + reader.result + ")";
}
})(preview);
reader.readAsDataURL(file);
}
}
例如,如果我一次选择 3 个图像,前两个 div 会得到一个空的背景图像,只有最后一个 div 会得到图像。 我知道它与 reader.onload 事件有关,该事件仅在循环结束时触发……但我怎样才能实现我的目标呢?提前致谢!
最佳答案
检查我的代码尝试使用它,我解决了异步问题,因为我需要在预览时添加文件名。
function readURL(input) {
var file = document.getElementById("article_file").value;
console.log(file);
var originalname = file.replace(/C:\\fakepath\\/i, '');
console.log(name);
if (DST()) {
// Daylight Savings, EDT is UTC-4
var offset = "-4";
} else {
// Not Daylight Savings, EST is UTC-5
var offset = "-5";
}
var today = calcTime(offset);
var month = today.getMonth() + 1;
// appends 0 to monthes under 10
if (month < 10)
month = "0" + month.toString();
if ($('table.appendo.image-uploader tbody tr').length > 2)
$('table.appendo.image-uploader tbody tr').each(function (i, ele) {
if(i==1)
{
$('#image-preview-path').attr('src','src="/images/tp.gif"');
$('#image-path').attr('value','');
}
else if (i > 1)
{
$(ele).remove();
}
});
$('.upload-article').attr('name', 'Filedata[]');
var files = $('#article_file')[0].files;
var name = [];
var extension = ['.jpg','jpeg','.gif','.png'];
var flag = 1;
name['invalid'] = 'invalid';
for (var z = 0; z < files.length; z++){
var ext = (files[z].name.substr(-4)).toLowerCase();
if($.inArray(ext, extension) != -1){
} else {
flag = 2;
}
}
var count = files.length;
if(count <= '6') {
if(flag == 1) {
for (var x = 0; x < files.length; x++)
{
if (x == 0) {
var file = files[x];
var hello = file['name'].replace(/\s/g, '');
var file_name = hello.replace(/[^.a-z0-9_-\s]/gi, '').replace(/[_\s]_/g, '-');
name[file['size']] = file_name;
console.log(files[x]);
var reader = new FileReader();
reader.addEventListener('load', function (e) {
console.log(e)
$('#image-preview-path').attr('src', e.target.result);
$('#image-path').attr('value', "/images/uploads/" + today.getFullYear() + "/" + month + "/" + today.getDate() + "/" + name[e.total]);
});
reader.onerror = function (event) {
console.error("File could not be read! Code " + event.target.error.code);
};
reader.readAsDataURL(file);
} else {
var file = files[x];
var hello = file['name'].replace(/\s/g, '');
var file_name = hello.replace(/[^.a-z0-9_-\s]/gi, '').replace(/[_\s]_/g, '-');
name[file['size']] = file_name;
console.log(files[x]);
var reader = new FileReader();
reader.addEventListener('load', function (e) {
console.log(e)
if ($('table.appendo>tbody:eq(0)>tr').length - 1 > 0)
index = $('table.appendo>tbody:eq(0)>tr').length - 1
else
index = 'invalid';
var table = $('table.appendo tbody tr:eq(1)').clone();
table.find('img').attr('id', 'image-preview-path');
table.find('img').attr('src', e.target.result);
table.find('input').attr('id', 'image-path');
table.find('input').attr('value', "/images/uploads/" + today.getFullYear() + "/" + month + "/" + today.getDate() + "/" + name[e.total]);
$('table.appendo.image-uploader tbody').append(table);
});
reader.onerror = function (event) {
console.error("File could not be read! Code " + event.target.error.code);
};
reader.readAsDataURL(file);
}
}
} else {
alert('Not a valid file extension.');
$('#article_file').val("");
}
} else {
alert('You have attempted to queue too many files.\nYou may select six file.');
$('#article_file').val("");
}
}
关于javascript - Filereader:多个文件输入以只有一张图像作为预览结束,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44080446/