3

WHAT I'M DOING

I'm trying to implement profile picture changing in php/jquery. When an image is uploaded the preview of the image is shown.

WHAT I REQUIRE

I want to get the src of the previewed image. When i use $('img').attr('src'); it gives the src of the old image and not the new previewed image.

SCRIPT

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

HTML

 <div class="pic">

  <form id="form1" enctype="multipart/form-data">

   <img src="profile.jpg" width="150"  alt="profile" title="" id="img"/>

     <span>Change Picture?</span>

      <div class="up">

         <input type='file' name ="file" id="imgInp"  />

     </div>

         <input type="submit" name="picture" id="picture" value="Update"/>

    </form>

 </div>
Nasik
  • 43
  • 9
  • possible duplicate of [is it possible to preview local images before uploading them via a form?](http://stackoverflow.com/questions/922057/is-it-possible-to-preview-local-images-before-uploading-them-via-a-form) – Derek Henderson Jun 19 '13 at 13:46
  • @DerekHenderson: Actually i have already implemented image preview. I want the src of the previewed image – Nasik Jun 19 '13 at 13:48
  • Wouldn't that be the value of your file input? – Derek Henderson Jun 19 '13 at 13:50
  • @DerekHenderson: but when i alert file input i m getting something like fakepath/image.jpg – Nasik Jun 19 '13 at 13:53

1 Answers1

1

There is a new security "feature" in IE 8 that hides the real path of the selected file from JavaScript calls (it returns c:\fakepath). This seems to only be activated for "Internet" servers ... not Local intranet servers...

See here for more information about C:\fakepath

Edit

Also, you should consider removing this line of code (you don't need it in your script)...

reader.readAsDataURL(input.files[0]);
Community
  • 1
  • 1
bastos.sergio
  • 6,684
  • 4
  • 26
  • 36