Not working "prepend" html5 image upload preview (dom)

Question

I have problem, when i dynamic add field for upload with jquery:

$('.content div').prepend(
    '<div'
        + '<input type="file" id="fileselect" name="fileselect[]" multiple>'
        + '<div id="messages"></div>'
    + '</div>'
);

div #messages shows images preview and input upload images, before upload i can show images on #messages box.

when i add this:

<input type="file" id="fileselect" name="fileselect[]" multiple>
<div id="messages"></div>

in html, all works, but by jquery not works :( i use this html5 show before upload script: http://blogs.sitepointstatic.com/examples/tech/filedrag/2/index.html http://blogs.sitepointstatic.com/examples/tech/filedrag/2/filedrag.js

how to edit this plugin to work with dom ?

Answer 1

UPDATE: The primary issue was that the filedrag.js script was getting loaded before the file input fields were prepared in the DOM. Once the script was loaded asynchronously, the subsequent calls worked.

Try this:

$("#fileselect").change(function() {
  var imgStr = "<img src='"+$(this).val()+"'/>";
  $("#messages").html(imgStr);
});