Question

试图弄清楚如何一次输入多个文件并将它们安排到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事件有关，它只在循环结束时触发....但我怎样才能实现我的目标？提前谢谢！

Answer 1

查看我的代码尝试使用它，我解决了Async问题，因为我需要添加文件名和预览。

datePicker.datePickerMode = .countDownTimer
datePicker.datePickerMode = .date

Answer 2

得到了解决方案：

return function (e) { preview.style.backgroundImage = "url(" + e.target.result + ")";}

它应该是：

d = {0:'1',1:'2'}

result = '{'
for k,v in d.items():
    result += '"{}":"{}",'.format(str(k),str(v))
result = result[:-1] + '}'

文件阅读器：多个文件输入结束，只有一个图像作为预览

2 个答案: