How do I insert an uploaded image into an tag/placeholder?

Question

How do I insert an uploaded image into an html < img > tag? Is it possible to create an < img > tag as placeholder for uploaded images?

I can select an image with "< input type="file" name="fileToUpload" id="fileToUpload" >" and after this i want to send that image to an img placeholder.

And is it possible to delete the uploaded image from the placeholder after the user closed the website?

Thanks a lot!

Please check [this](https://stackoverflow.com/questions/18457340/how-to-preview-selected-image-in-input-type-file-in-popup-using-jquery) — Mahesh, Feb 18 '20 at 10:17
Thanks @TatvasoftCorp it worked. Do you know how I can crop the image when the user upload it? — qws, Feb 18 '20 at 10:45
@TatvasoftCorp Oh sorry, I dont need the crop function. I mean that the image just resize to witdh="96px" after upload. I used this function for the upload: jsfiddle.net/LvsYc — qws, Feb 18 '20 at 11:00
I guess you want to resize the image just to show resized image in img tag, you could give width to img tag — Mahesh, Feb 18 '20 at 11:02
@TatvasoftCorp Yes I already did that. But after I select the uploaded img to put it in my graph, it has the original size. So I need to resize the image at upload? — qws, Feb 18 '20 at 11:06
If you use jQuery's .animate method, like .animate({width: maxWidth}), it should scale the other dimension for you automatically. — Mahesh, Feb 18 '20 at 11:08

score 1 · Answer 1 · answered Feb 18 '20 at 10:25

1

first "src" called "attribute"

what you have to do

1-locate you image on server -> see where did you upload the file first

2-take the path of the file and put it inside the "src" "attribute"

ex:

1-you uploaded the image lets say project/images

2-your image path will be in project/images/image.jpg

3-take this part and but it inside the src attribute

 src="project/images/image.jpg"

answered Feb 18 '20 at 10:25

Yahya Ayyoub

322
2
10

Thanks for your answer. Can you also tell me how to crop the image which gets uploaded (at the same time)? – qws Feb 18 '20 at 10:50
check this https://stackoverflow.com/questions/1855996/crop-image-in-php – Yahya Ayyoub Feb 18 '20 at 10:51
Oh I think i just need to set the image size of the uploaded img, no need for crop function. It should be in 96px width after upload. upload function: http://jsfiddle.net/LvsYc/ – qws Feb 18 '20 at 10:56

score 1 · Answer 2 · answered Feb 18 '20 at 10:34

1

You can try like this

<input type="file" id="docpicker" accept="image/*" onChange={updateImageDisplay} multiple></input>
<div class="previewContainer">
   <p>No files currently selected for upload</p>
</div>

const updateImageDisplay = ss => {
  const input = document.querySelector('input');
  const previewContainer = document.querySelector('.previewContainer');
  [...input.files].forEach(file => {
    const image = document.createElement('img');
    image.src = URL.createObjectURL(file);
    previewContainer.appendChild(image);
  })
}

answered Feb 18 '20 at 10:34

Raj Kumar

839
8
13

Thanks for your answer. Can you also tell me how to crop the image which gets uploaded (at the same time)? – qws Feb 18 '20 at 10:50
you can crop using canvas. i attached the answer – Raj Kumar Feb 18 '20 at 11:00

score 0 · Answer 3 · answered Feb 18 '20 at 11:02

Try using canvas to crop the image

const updateImageDisplay = () => {
  const input = document.querySelector('input');
  const previewContainer = document.querySelector('.previewContainer');
  [...input.files].forEach(file => {
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();
      imageObj.onload = function() {
        var sourceX = 150;
        var sourceY = 0;
        var sourceWidth = 150;
        var sourceHeight = 150;
        var destWidth = sourceWidth;
        var destHeight = sourceHeight;
        var destX = canvas.width / 2 - destWidth / 2;
        var destY = canvas.height / 2 - destHeight / 2;

        context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
      };
      imageObj.src = URL.createObjectURL(file);
      previewContainer.appendChild(canvas);
  })
}

But did the code automaticly crop the original image size to 96px at upload? Or is this code for crop it after upload. It was my faul that I wanted to "crop" the image. I mean that I just need to resize the original size of the uploaded image to width 96px. Is it possible? If I add the width to the < img > tag and select that image to my graph, it just has the original size, not the 96px witdh. — qws, Feb 18 '20 at 11:08
if you want to crop before uploading the image to server, you can use some external library to help for cropping, something like [cropperjs](https://github.com/fengyuanchen/cropperjs/blob/master/README.md) — Raj Kumar, Feb 18 '20 at 13:58

How do I insert an uploaded image into an tag/placeholder?

3 Answers3