preview image before form submit

Question

I have ImageField in my form. Is there any way to show chosen file before submitting a form? Maybe it is possible in jQuery?

I read that I can somehow access this files with request.FILES, but I think it will be empty before I will submit form.

Answer 1

try this one.

function upload_img(input) {
  if (input.files && input.files[0]) {
    var src = URL.createObjectURL(input.files[0])
    $('#img_id').attr('src', src)
  }
}

AND HTML is below.

Thanks.

<form id="form_img">
  <input type='file' onchange="upload_img(this);" />
  <img id="img_id" src="#" alt="your image" />
</form>

This may helpful to you.