Tips for showcasing several thumbnails simultaneously as you upload images on a webpage with HTML and JavaScript

Question

Tips for showcasing several thumbnails simultaneously as you upload images on a webpage with HTML and JavaScript

function displayImage(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#selectedImage')
        .attr('src', e.target.result)

    };

    reader.readAsDataURL(input.files[0]);
  }
}

<html>

<head></head>

<body>
  <ul>
    <li>
      <input type='file' onchange="displayImage(this);" />
      <img id="firstImage" src="#" alt="first image" />
    </li>

    <li>
      <input type='file' onchange="displayImage(this);" />
      <img id="secondImage" src="#" alt="second image" />
    </li>
  </ul>
</body>

</html>

> Blockquote

"If you click on any 'choose image' button, the image will be displayed in the first case only. I tried changing the IDs in both cases and in the JavaScript as well but it didn't work. The code above provides a solution on how to display an image in HTML."

javascript html css

Answer 1

Answer №1

The issue lies in the requirement for IDs to be unique. To solve this problem, I introduced a new attribute called document-up, which successfully resolved the issue at hand. In situations like this, it is viable to utilize attributes or classes to select multiple elements.

function readURL(input,option) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      if (option == 1){
         $("#documentUpload1")
         .attr('src', e.target.result)
       } else {
         $("#documentUpload2")
        .attr('src', e.target.result)  
       }
    };

    reader.readAsDataURL(input.files[0]);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>

<head></head>

<body>
  <ul>
    <li>
      <input id="input1" type='file' onchange="readURL(this,1);" />
      <img id="documentUpload1" document-up src="#" alt="first image" />
    </li>

    <li>
      <input id="input2" type='file' onchange="readURL(this,2);" />
      <img id="documentUpload2" document-up src="#" alt="second image" />
    </li>
  </ul>
</body>

</html>

Answer 2

The issue lies in the requirement for IDs to be unique. To solve this problem, I introduced a new attribute called document-up, which successfully resolved the issue at hand. In situations like this, it is viable to utilize attributes or classes to select multiple elements.

function readURL(input,option) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      if (option == 1){
         $("#documentUpload1")
         .attr('src', e.target.result)
       } else {
         $("#documentUpload2")
        .attr('src', e.target.result)  
       }
    };

    reader.readAsDataURL(input.files[0]);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>

<head></head>

<body>
  <ul>
    <li>
      <input id="input1" type='file' onchange="readURL(this,1);" />
      <img id="documentUpload1" document-up src="#" alt="first image" />
    </li>

    <li>
      <input id="input2" type='file' onchange="readURL(this,2);" />
      <img id="documentUpload2" document-up src="#" alt="second image" />
    </li>
  </ul>
</body>

</html>

Answer 3

Answer №2

If you're looking for a solution that can handle any number of images and any number of images per file-picker, this approach will do the trick.

Simply encase the #previewHolder div within a form and manage its submission accordingly.

function createNewElement(tag){return document.createElement(tag)}
function findElementById(id){return document.getElementById(id)}
function findAllByTag(tag,parent){return (parent == undefined ? document : parent).getElementsByTagName(tag)}


// Useful for HtmlCollection, NodeList, String types
function iterate(array, callback, scope){for (var i=0,n=array.length; i< n; i++)callback.call(scope, array[i], i, array);} // passes back necessary data

// Callback processes data retrieved from the .target.result field in the parameter passed to it.
function loadFileObject(fileObj, loadedCallback){var reader = new FileReader();reader.onload = loadedCallback;reader.readAsDataURL(fileObj);}


window.addEventListener('load', onDocumentLoaded, false);

function onDocumentLoaded(evt)
{
findElementById('addBtn').addEventListener('click', onAddButtonClicked, false);
}


/* HTML below function needs to create - Skip img creation since it's generated when files are picked */
/*
<div class='item'>
<img height='100px' width='100px'/><br>
<input type='file'/>
</div>
*/
function onAddButtonClicked(evt)
{
var wrapper = createNewElement('div');
wrapper.className = 'item';
//var img = createNewElement('img');
//img.style.height = '100px';
//wrapper.appendChild(img);

var input = createNewElement('input')
input.type = 'file';

// Enable multiple selection for file inputs
// input.multiple = 'true';

input.addEventListener('change', onFileChanged, false);
input.name = 'inputFiles[]';// Include [] so PHP can retrieve all files
wrapper.appendChild(input);

findElementById('previewHolder').appendChild(wrapper);
}

function onFileChanged(evt)
{
var numFiles = this.files.length;
var itemWrapper = this.parentNode;
var fileInput = this;

if (numFiles === 0)
{
// No files chosen, remove preview/file-picker element
var previewHolder = itemWrapper.parentNode;
previewHolder.removeChild(itemWrapper);
}
else
{
// Remove existing images
while (findAllByTag('img', itemWrapper).length != 0)
itemWrapper.removeChild( findAllByTag('img', itemWrapper)[0] );

iterate(this.files, loadAndPreviewImage);

function loadAndPreviewImage(fileObj)
{
loadFileObject(fileObj, onFileObjLoaded);

function onFileObjLoaded(evt)// Retrieve data using evt.target.result
{
var img = createNewElement('img');
img.style.height = '100px';
img.src = evt.target.result;
itemWrapper.insertBefore(img, fileInput);
}
}
}
}

.item
{
border: solid 1px black;
border-radius: 6px;
padding: 4px;
}
.button:hover
{
background-color: #b0ffb0;
cursor: pointer;
}

<div id='previewHolder' style='width: 200px'>
<div class='button' id='addBtn' style='text-align:center;padding: 4px'><svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 32 32">
<g transform="translate(0 -1020)" stroke="#00c03b" fill="none">
<circle cx="16" cy="1036" r="14.5" stroke-width="2.998"/>
<path d="m8 1036h16" stroke-linecap="round" stroke-width="3"/>
<path d="m16 1044v-16" stroke-linecap="round" stroke-width="3"/>
</g>
</svg></div>
</div>

Answer 4

If you're looking for a solution that can handle any number of images and any number of images per file-picker, this approach will do the trick.

Simply encase the #previewHolder div within a form and manage its submission accordingly.

function createNewElement(tag){return document.createElement(tag)}
function findElementById(id){return document.getElementById(id)}
function findAllByTag(tag,parent){return (parent == undefined ? document : parent).getElementsByTagName(tag)}


// Useful for HtmlCollection, NodeList, String types
function iterate(array, callback, scope){for (var i=0,n=array.length; i< n; i++)callback.call(scope, array[i], i, array);} // passes back necessary data

// Callback processes data retrieved from the .target.result field in the parameter passed to it.
function loadFileObject(fileObj, loadedCallback){var reader = new FileReader();reader.onload = loadedCallback;reader.readAsDataURL(fileObj);}


window.addEventListener('load', onDocumentLoaded, false);

function onDocumentLoaded(evt)
{
findElementById('addBtn').addEventListener('click', onAddButtonClicked, false);
}


/* HTML below function needs to create - Skip img creation since it's generated when files are picked */
/*
<div class='item'>
<img height='100px' width='100px'/><br>
<input type='file'/>
</div>
*/
function onAddButtonClicked(evt)
{
var wrapper = createNewElement('div');
wrapper.className = 'item';
//var img = createNewElement('img');
//img.style.height = '100px';
//wrapper.appendChild(img);

var input = createNewElement('input')
input.type = 'file';

// Enable multiple selection for file inputs
// input.multiple = 'true';

input.addEventListener('change', onFileChanged, false);
input.name = 'inputFiles[]';// Include [] so PHP can retrieve all files
wrapper.appendChild(input);

findElementById('previewHolder').appendChild(wrapper);
}

function onFileChanged(evt)
{
var numFiles = this.files.length;
var itemWrapper = this.parentNode;
var fileInput = this;

if (numFiles === 0)
{
// No files chosen, remove preview/file-picker element
var previewHolder = itemWrapper.parentNode;
previewHolder.removeChild(itemWrapper);
}
else
{
// Remove existing images
while (findAllByTag('img', itemWrapper).length != 0)
itemWrapper.removeChild( findAllByTag('img', itemWrapper)[0] );

iterate(this.files, loadAndPreviewImage);

function loadAndPreviewImage(fileObj)
{
loadFileObject(fileObj, onFileObjLoaded);

function onFileObjLoaded(evt)// Retrieve data using evt.target.result
{
var img = createNewElement('img');
img.style.height = '100px';
img.src = evt.target.result;
itemWrapper.insertBefore(img, fileInput);
}
}
}
}

.item
{
border: solid 1px black;
border-radius: 6px;
padding: 4px;
}
.button:hover
{
background-color: #b0ffb0;
cursor: pointer;
}

<div id='previewHolder' style='width: 200px'>
<div class='button' id='addBtn' style='text-align:center;padding: 4px'><svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 32 32">
<g transform="translate(0 -1020)" stroke="#00c03b" fill="none">
<circle cx="16" cy="1036" r="14.5" stroke-width="2.998"/>
<path d="m8 1036h16" stroke-linecap="round" stroke-width="3"/>
<path d="m16 1044v-16" stroke-linecap="round" stroke-width="3"/>
</g>
</svg></div>
</div>

Tips for showcasing several thumbnails simultaneously as you upload images on a webpage with HTML and JavaScript

Answer №1

Answer №2

Similar questions

Contrasting loading data from an empty state and having no items present

Using Angular 4 for HTML 5 Drag and Drop functionality

The Bootstrap popover fails to display

A Vue.js trick to modify the element's class within a v-for loop when hovering in and out

Obtaining zip files using AngularJS

Ways to toggle the display of a div depending on various radio button selections

Storing a webpage in HTML with the use of @import function in CSS

Subrouter response yields a 404 error code

Discover which students have conflicting schedules with themselves

What is the proper way to add an object to an array without cloning or passing it by reference?

JavaScript array manipulation

Images of varying sizes aligned at the bottom of cards, organized in rows with pure CSS styling

Tips for effectively using $interval for ongoing polling in AngularJS?

Is it possible for an HTML file to not recognize an external CSS stylesheet?

Encountering issue with Konva/Vue-Konva: receiving a TypeError at client.js line 227 stating that Konva.Layer is not a

Formatting tables

Unable to access an HTML element using refs within the render() method

IE9 Z-index Issue

What causes the failure of data reaching the server?

I am attempting to retrieve a data key from an api, but I am encountering keys with special characters such as hyphens. How can I properly incorporate them into my code?