File Uploaded in Jquery is not Showing Up

Question

I am playing around in my code and trying to implement a system to where a user can choose a file then the file they select can replace the placeholder image that is already provided in the code.I am getting an error in Jquery that the file cannot be found and the uploaded is broken and has 'fakepath in it' like this : file:///C:/fakepath/IMG_0136.JPG which looks wrong. Code is below. Any help is appreciated!

$('.button3').click(function() {
        var fileName = $('.fileName').val().toString().toLowerCase();
        var fileSplit = fileName.split(".");
        var file;

        if (fileSplit[1] == "jpg" || fileSplit[1] == "png") {
            file = $('.fileName').val();
            $('.navbar2 ul li.logo img').attr('src',file);

        }

  <input type="file" class="fileName" name="pic" accept="image/*">
  <a><i class="fa fa-times" aria-hidden="true"></i></a>
  <div class="button3"></div>
  <div class="button3">
     <h2>Submit</h2>
     <div class="loading-signal"></div>
     <div class="successful3"><i class="fa fa-check" aria-hidden="true"></i>
     </div>
  </div>

score 1 · Answer 1 · answered Sep 04 '17 at 05:13

Here is snippet which loads the image selected into an img, i am not sure that this is what you needed, hope it will help (Select an image file then click on submit)

 $('.button3').click(function() {
        files = $('input[type=file]').get(0).files;
        if(files.length == 0)
         {
          alert('No files selected');
          return;
         }
  fr = new FileReader();
  fr.onload = function () 
   {
             $('img').attr('src',fr.result);
         }
        fr.readAsDataURL(files[0]);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" class="fileName" name="pic" accept="image/*">
 
  <div class="button3">
     <h2>Submit</h2>
  </div>
  <img src="">

score 1 · Accepted Answer · answered Sep 04 '17 at 05:34

Have a look at this fiddle to preview image after upload

I have changed following things :-

Id to input file control
Created an image tag to preview uploaded image
Used file reader to read the contents of uploaded image

Hope it helps...

HTML :-

    <input type="file" class="fileName" name="pic" id="user_image" accept="image/*">
  <a><i class="fa fa-times" aria-hidden="true"></i></a>
  <div class="button3"></div>
  <div class="button3">
     <h2>Submit</h2>
     <div class="loading-signal"></div>
     <div class="successful3"><i class="fa fa-check" aria-hidden="true"></i>
     </div>
  </div>
  <img id="uploaded_image"/>

Javascript :-

    $('.button3').click(function() {
        var fileName = $('.fileName').val().toString().toLowerCase();
        var fileSplit = fileName.split(".");
        console.log($("#user_image")[0].files);
        if (fileSplit[1] == "jpg" || fileSplit[1] == "png") {
           // below code will store the image.
           var file = $("#user_image")[0].files[0];

           // We will use file reader to read the content of file.
           var reader = new FileReader();
           reader.onload = function (e) {
                $('#uploaded_image').attr('src',e.target.result);
            }
                reader.readAsDataURL($("#user_image")[0].files[0]);

        }
});

score 0 · Answer 3 · answered Sep 04 '17 at 05:04

Unless you know the exact location of a user's uploaded image I don't think it will work. You'll probably have to have the user upload the image to your server. It's also a security protection for your browser. How to resolve the C:\fakepath?

(Also you're missing closing brackets for your .click function. Add )} to the end.

File Uploaded in Jquery is not Showing Up

3 Answers3