JS-Load-Image Thumbnails

Display multiple pre-upload thumbnails using the JavaScript Load Image plugin

by meetravi

HTML

<form action="post/create" method="post" enctype="multipart/form-data">
    <!-- FILE INPUT -->
    <p><input type="file" name="images[]" id="upload-post-images" multiple></p>
    
    <!-- THUMBNAILS -->
    <div id="result" class="result">
        <p>This only works in browsers with support for the <a href="https://developer.mozilla.org/en/DOM/window.URL">URL</a> or <a href="https://developer.mozilla.org/en/DOM/FileReader">FileReader</a> API.</p>
    </div><br>
</form>

<script type='text/javascript' src="https://schwesidesign.com/JSLoadImage/js/load-image.all.min.js"></script>

CSS

.result,
.thumbnail {
  width: 80%;
  padding: .2em;
  background: #fff;
  color: #000;
  text-align: center;
}

JavaScript

// Call the plugin
document.getElementById('upload-post-images').onchange = function (e) {
		for(i = 0; i<=e.target.files.length; i++)
    {
      loadImage(
          e.target.files[i],
          function (img) {
              document.body.appendChild(img);
          },
          {maxWidth: 200} // Options
      );
    }
};

/*
 * JavaScript Load Image JS
 * https://github.com/blueimp/JavaScript-Load-Image
 *
 * Copyright 2013, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 */

/*global window, document, loadImage, HTMLCanvasElement, $ */

$(function () {
    'use strict';

    var result = $('#result'),
        exifNode = $('#exif'),
        thumbNode = $('#thumbnail'),
        actionsNode = $('#actions'),
        currentFile,
        replaceResults = function (img) {
            var content;
            if (!(img.src || img instanceof HTMLCanvasElement)) {
                content = $('<span>Die Bilddatei konnte nicht geladen werden.</span>');
            } else {
            	document.body.appendChild(div(f[i].name));
                content = $('<a target="_blank">').append(img)
                    .attr('download', currentFile.name)
                    .attr('href', img.src || img.toDataURL());
            }
            result.children().replaceWith(content);
            if (img.getContext) {
                actionsNode.show();
            }
        },
        displayImage = function (file, options) {
            currentFile = file;
            if (!loadImage(
                    file,
                    replaceResults,
                    options
                )) {
                result.children().replaceWith(
                    $('<span>Ihr Browser unterstĂĽtzt leider nicht das URL oder FileReader API.</span>')
                );
            }
        },
        displayExifData = function (exif) {
            var thumbnail = exif.get('Thumbnail'),
                tags =...