CODEWITHSUNDEEP
javascriptjqueryhtmlimageinput
NickVH
NickVH

Reputation: 143

Multiple Files - Preview in DIVs

Can someone help me out here.

If I have 4 Inputs of type "file", and 4 div's with no content.

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

How can I show chosen image from input 1 in div 1 and so on? (I need 4 inputs not 1 input and each chosen image to a div)

Upvotes: 0

Views: 46

Answers (1)

alessandrio
alessandrio

Reputation: 4370

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>

Upvotes: 2

Related Questions