[英]Filereader: Multiple file input ends with only one image as preview
試圖弄清楚如何一次輸入多個文件並將它們排列到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("");
}
}
得到了以下解決方案:
return function () { preview.style.backgroundImage = "url(" + reader.result + ")";}
它應該是:
return function (e) { preview.style.backgroundImage = "url(" + e.target.result + ")";}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.