CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap-3upload
sanoj lawrence
sanoj lawrence

Reputation: 993

Error displaying image preview before uploading

I am using following code to upload image from multiple inputs and displaying a preview. I can view preview of first input only. When it comes to other three it does not work.

SCRIPT

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      $('#blah')
      .attr('src', e.target.result);
    };
    reader.readAsDataURL(input.files[0]);
  }
}

HTML

<input type='file' onchange="readURL(this);" />
<img id="blah" src="http://placehold.it/180" alt="your image" />
<input type='file' onchange="readURL(this);" />
<img id="blah2" src="http://placehold.it/180" alt="your image" />
<input type='file' onchange="readURL(this);" />
<img id="blah3" src="http://placehold.it/180" alt="your image" />
<input type='file' onchange="readURL(this);" />
<img id="blah4" src="http://placehold.it/180" alt="your image" />

NOTE: Is there a way without changing HTML, and making some small change in script how to display preview.

I am using Bootstrap v3.3

Upvotes: 0

Views: 493

Answers (3)

Waqas Ahmed
Waqas Ahmed

Reputation: 31

You need to add jQuery in your html file

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      $('#blah').attr('src', e.target.result);
    };
    reader.readAsDataURL(input.files[0]);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" onchange="readURL(this)"/>
<img src="#" id="blah" />

Upvotes: -1

Endless
Endless

Reputation: 37815

Here is what you can do without changing the HTML. Using the nextElementSibling you can get hold of the next element and assign the src value to it.

Alternetive is with jQuery's .next() function that those the same thing.

$(input).next().attr('src', url);

I'm also suggesting using the Object urls instead of reading the file as dataURL which takes time to compile and decompile back and forth between a base64 encoded string where as a object url is just a pointer to a file.

function readURL(input) {
  if (input.files && input.files[0]) {
    var url = URL.createObjectURL(input.files[0]);
    input.nextElementSibling.src = url;
    // $(input).next().attr('src', url);
  }
}

If you could, maybe add a extra attribute to the file input accept="image/*" so they will only select a valid image file

Upvotes: 1

M Usman Nadeem
M Usman Nadeem

Reputation: 415

actually issue is that you use

$('#blah')

so every time you update only one image tag, you need to target the diff img tag accordingly, one way to do this is

Html

<input type='file' onchange="readURL(this, 'blah');" />
 <img id="blah" src="http://placehold.it/180" alt="your image" />
 <input type='file' onchange="readURL(this, 'blah2');" />
 <img id="blah2" src="http://placehold.it/180" alt="your image" />
 <input type='file' onchange="readURL(this, 'blah3');" />
 <img id="blah3" src="http://placehold.it/180" alt="your image" />
  <input type='file' onchange="readURL(this, 'blah4');" />
  <img id="blah4" src="http://placehold.it/180" alt="your image" />

now you get diff id of img tag every time now you js function look like.

JS

function readURL(input, target) {
 if (input.files && input.files[0]) {
 var reader = new FileReader();
 reader.onload = function (e) {
 $('#'+ target)
     .attr('src', e.target.result);
        };
         reader.readAsDataURL(input.files[0]);
        }
        }

now it works, good luck

Upvotes: 1

Related Questions