Upload a local Image into a Div Using JavaScript?

Question

I am building a site about different picture frames and would like the end user to be able to upload an image file into a div that will then be displayed in the page? I have made a very basic fiddle:

http://jsfiddle.net/Margate/w8C5r/

The idea is that the user clicks on the upload image button and a window will open that will enable them to browse to the location of the file they want to upload to the page. They locate the file and select it. The picture then displays inside the div tag. Is this possible using Javascript?

Thank you very much for any help in advance.

<html>
<head>
<title>Upload Image Help!</title>

<style>
#addImage{position: absolute; top: 5px; left: 50px; width: 300px; height: 200px; border: 1px solid black;}
#button{position: absolute; top: 215px; left: 135px; width: 120px; height: 30px;}
</style>
</head>

<body>
<div id="addImage"></div>
<button id="button" type="button">Upload Image</button>
</body>
</html>

term confusion: you don't upload to a page, you upload to a server. So do you want to have people upload files to a server, which you then use on the page as image link, or do you want people to simply load local data into the running page, which you can then use on the page but it'll be gone if they refresh? — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Jun 17, 2013 at 16:54
Hello Mike, thank you for your reply. I just want to picture to be uploaded into the browser yes. Just so the end user can get a visual on how it will look in different picture frames. My intention is that once the image is on the page I will use JS to change the frames on click. No need therefore to save the image to a server. — Margate
– Margate, Commented Jun 17, 2013 at 19:08

streetlogics · Accepted Answer · 2013-06-17 16:54:01Z

1

This is a hard question to answer, but the "correct" answer is "no, this cannot be natively done with just html, css, and js". The reason is because you cannot point to a local file via html tags for security reasons. The only choice you have is to actually have the JS upload the file to the server via an AJAX call, and then display the temporary uploaded file in the div itself.

answered Jun 17, 2013 at 16:54

streetlogics

4,74037 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Margate Over a year ago

Hello streetlogics, thank you for your advice. I will look into learning about AJAX in that case I guess.

streetlogics Over a year ago

Here's a good tutorial that you can follow that should help simplify things conceptually a bit - css-tricks.com/ajax-image-uploading

trentHarlem · Accepted Answer · 2021-02-10 15:20:14Z

i know this an old post but this is one way to do it.

started here... https://www.w3schools.com/jsref/prop_fileupload_files.asp

ended here... https://jsfiddle.net/trentHarlem/q6zutLjv/11/

uses only html css js

HTML

```<div id='input-container'>
  <input type="file" id="fileElem" multiple accept="image/*">
  <a href="#" id="fileSelect"></a>
  <div id="fileList"></div>
</div>

<div id="image-container"></div>
<div id="image-container2"></div>```

CSS

    #image-container {
  height: 400px;
  width: 400px;
  background-size: 150%;
}

Javascript

  const fileSelect = document.getElementById("fileSelect"),
 fileElem = document.getElementById("fileElem"),
 fileList = document.getElementById("fileList");

fileSelect.addEventListener("click", function(e) {
 if (fileElem) {
   fileElem.click();
 }
 e.preventDefault(); 
}, false);

fileElem.addEventListener("change", handleFiles, false);

function handleFiles() {
 if (!this.files.length) {} else {
   const list = document.createElement("ul");
   fileList.appendChild(list);
   for (let i = 0; i < this.files.length; i++) {
     const li = document.createElement("li");
     list.appendChild(li);
     const imgContainer = document.getElementById("image-container")
     const imgContainer2 = document.getElementById("image-container2")
     const img = document.createElement("img");
     img.src = URL.createObjectURL(this.files[i]);

     // for CSS Background-image
     imgContainer.style.backgroundImage = `url("${img.src}")`;
     
     // for HTML src
     imgContainer2.innerHTML = `<img width='400px' height='auto' 
     src='${img.src}'/>`;

     // hide input after file selected
     fileElem.addEventListener("click", hide());

     function hide() {
       document.getElementById('input-container').style.display = 'none';
     }

   }
 }
}

this needs some tightening up and a local storage mod but it works on safari brave firefox and chrome as of this post

Collectives™ on Stack Overflow

Upload a local Image into a Div Using JavaScript?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related