CODEWITHSUNDEEP
javascripthtml
Logical Error
Logical Error

Reputation: 95

Failed to load resource: the server responded with a status of 404 (Not Found) while loading image in img element

I want to load image while selecting it from file picker dialog.

Code given below but it does not load the image in img tag 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <img id="upload-file-info" />
  <form action="#">
    <label class="btn btn-primary" for="my-file-selector">
    	<input id="my-file-selector" type="file" style="display:none" onchange="$('#upload-file-info').attr('src', this.files[0].name)">Click to select image
    </label>
  </form>
</div>

Upvotes: 0

Views: 189

Answers (1)

Ritesh Khandekar
Ritesh Khandekar

Reputation: 4005

I believe you want preview of image in img tag.

You have to change src of img to data URL of image:

$('#upload-file-info').attr('src', window.URL.createObjectURL(this.files[0]))


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <img id="upload-file-info" />
  <form action="#">
    <label class="btn btn-primary" for="my-file-selector">
    	<input id="my-file-selector" type="file" style="display:none" onchange="$('#upload-file-info').attr('src', window.URL.createObjectURL(this.files[0]))">Click to select image
    </label>
  </form>
</div>

The server gives 404 error because input element doesn't add image files to server. Your selected image is saved in browser only.

Upvotes: 1

Related Questions