javascript - How to show image preview before Upload?

Question

I want to show image preview before uploading process. In my case I selected multiple images with input file and the list of file name will show as link. When I click on the image file name link then the preview image popup will show of it's specific image. Here is my code..

<input id="uploadBtn" type="file" class="upload" multiple="multiple" name="browsefile" style="display: none !important;"/>

<input type="button" value="ファイル追加" onclick="document.getElementById('uploadBtn').click();" style="float: right;"/>

<input id="filename" type="hidden" />
<br>
<div id="upload_prev"></div>
<div style="clear:both;"></div>

Here is my javascript

<script type="text/javascript">
  $(document).on('click','.close',function(){
    $(this).parents('span').remove();
  })

  document.getElementById("uploadBtn").onchange = function () {
     document.getElementById("uploadFile").value = this.value;
  };

  document.getElementById('uploadBtn').onchange = uploadOnChange;

  function uploadOnChange() {
    var filename = this.value;
    var lastIndex = filename.lastIndexOf("");
    if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
var files = $('#uploadBtn')[0].files;
for (var i = 0; i < files.length; i++) {
  $("#upload_prev").append('<span><br><div class="col-md-10"><span class="uploadFiles">'+ '<a href="">' +files[i].name+ '</a>' +'</span></div><div class="col-md-2"><p class="close" style="font-size: 13pt;">削除</p><br></div></span>');
}
document.getElementById('filename').value = filename;
}
</script>

Here is Screenshot

Answer 1

use FileReader, see How to show local picture in web page?

if no support, you can upload to server tmp dir first, then preview

$('#tmp_img').attr('src','tmp/tmp_hashnumber.jpg');

move it after make sure