Question

有人可以帮助我。

如果我有4个输入类型＆＃34;文件＆＃34;和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）

Answer 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>

多个文件 - 在DIV中预览

1 个答案: