多个文件 - 在 DIV 中预览答案

【问题标题】：Multiple Files - Preview in DIVs多个文件 - 在 DIV 中预览
【发布时间】：2015-04-15 19:25:06
【问题描述】：

谁能帮帮我。

如果我有 4 个“文件”类型的输入，以及 4 个没有内容的 div。

<div>
    <input type="file" name="bestand_een" class="" value="">
    <input type="file" name="bestand_twee" class="" value="">
    <input type="file" name="bestand_drie" class="" value="">
    <input type="file" name="bestand_vier" class="" value="">
</div>

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>

如何在 div 1 中显示从输入 1 选择的图像等等？（我需要 4 个输入而不是 1 个输入，并且每个选择的图像到一个 div）

【问题讨论】：

您想在网页中显示本地文件系统上的文件？
是的，直接在其中一个 div 中显示选择的图像
如果这将是网站上的一个页面，则该页面必须可以访问该图像。这意味着必须将图像上传到运行网站的服务器上。这在 JavaScript 和 HTML 中是不可能的。您必须拥有一种服务器端编程语言，例如 PHP 或 .NET，才能检索上传的文件并将其存储在服务器上。
stackoverflow.com/questions/6250704/… 的可能重复项
不可能只在其中一个 div 的输入中显示所选图像。像文件阅读器一样？

标签： javascript jquery html image input

【解决方案1】：

function readURL(input, ndx) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $(".out").eq(ndx).css({
                width: 100,
                height: 100,
                "background-image": "url("+e.target.result+")",
                "background-size": "100% 100%",
                "background-repeat": "no-repeat"
            });
        };
        reader.readAsDataURL(input.files[0]);
    }
}

$("input[type=file]").change(function(){
    readURL(this, $(this).index());
});

<div>
    <input type="file" name="bestand_een" class="" value="">
    <input type="file" name="bestand_twee" class="" value="">
    <input type="file" name="bestand_drie" class="" value="">
    <input type="file" name="bestand_vier" class="" value="">
</div>

<div id="one" class="out"></div>
<div id="two" class="out"></div>
<div id="three" class="out"></div>
<div id="four" class="out"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

【讨论】：