CODEWITHSUNDEEP
javascripthtmlfile-upload
Margate
Margate

Reputation: 421

Upload a local Image into a Div Using JavaScript?

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>

Upvotes: 0

Views: 3317

Answers (2)

trentHarlem
trentHarlem

Reputation: 109

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

Upvotes: 0

streetlogics
streetlogics

Reputation: 4730

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.

Upvotes: 1

Related Questions