How do I show the image name under the thumbnail, and how do I allow the user to select one or more of the images

0

It's a photo-tagging platform, I want the user to be able to insert the photos into the gallery and then let him select which ones he wants to catalog.

This gallery.js is creating a gallery of thumbnails based on the photos you've uploaded

(function(){
"use strict";

function previewImage(file) {
    var galleryId = "gallery";

    var gallery = document.getElementById(galleryId);
    var imageType = /image.*/;

    if (!file.type.match(imageType)) {

        throw "File Type must be an image";
    }

    var thumb = document.createElement("div");
    thumb.classList.add('thumbnail');
    var img = document.createElement("img");
    img.file = file;
    thumb.appendChild(img);
    gallery.appendChild(thumb);

    // Using FileReader to display the image content
    var reader = new FileReader();
    reader.onload = (function(aImg) { return function(e) { aImg.src = 
    e.target.result; }; })(img);
    reader.readAsDataURL(file);
}

 var uploadfiles = document.querySelector('#fileinput');

uploadfiles.addEventListener('change', function () {
    var files = this.files;
    for(var i=0; i<files.length; i++){
        previewImage(this.files[i]);            
    }

  }, false);
 })();

In this html is where the gallery is being created

<!doctype html>
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 <title>Preview images</title>
 <style>

    html {
 font-family: sans-serif;
  } 
    #gallery .thumbnail{
        width: 70px;
        height: 70px;
        float:left;
        margin: 20px;
     }
     #gallery .thumbnail img{
        width: 50px;
        height: 50px;
    }

    </style>
    </head>
    <body>
    <h2>Upload images ...</h2>

    <input type="file" id="fileinput" multiple accept="image/*" />

    <div id="gallery"></div>
    <script src="../JS/gallery.js"></script>
   </body>
   </html>
    
asked by anonymous 08.05.2018 / 15:07

0 answers