how to clone input type file content?

Question

I have this input typed file, when a user uploads a photo(not submit), it clones this photo and appends it to the div

<input type="file" class="upload"></input>
<button class="submit"></button
<div class="append-here" style="width:500px, height: 500px; background:red;></div>


<script>
var y = $(".append-here")
$(".upload").val().clone(true, true).appendTo(y);
</script>

are you looking for filereader? developer.mozilla.org/en-US/docs/Web/API/FileReader/… — Bryan Dellinger
– Bryan Dellinger, Commented Jul 15, 2018 at 3:15

Kiran Shahi · Accepted Answer · 2018-07-15 04:13:45Z

1

On your input change use the FileReader object and read your input file property:

$('.submit').on('click', function() {
    $(this).hide();
    var preview = $('img');
    preview.show();
    var file = $('input[type=file]').prop('files')[0];
    var reader = new FileReader();
    reader.addEventListener("load", function() {
        preview.attr('src', reader.result);
    }, false);
    if (file) {
        reader.readAsDataURL(file);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" class="upload"/>
<img src="" height="200" alt="Image preview..." style="display:none;"/>
<button class="submit">Submit</button>

edited Jul 15, 2018 at 4:13

answered Jul 15, 2018 at 3:48

Kiran Shahi

8,0109 gold badges41 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

masnion Over a year ago

thanks for your answer but there is just one thing .. I want the preview to be done when i click the submit button and thanks

masnion Over a year ago

WORKS LIKE A CHARM :>

Collectives™ on Stack Overflow

how to clone input type file content?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related