Sample ajax multiple upload preview
Creating in 09th, January of 2017 At 00:08 o'clock by WILLIAN SANTANA
Introduction of Ajax Mltiple Upload Preview
Using a function FileReader() to HTML5, users may have a preview of the image before it will pass to the server.
This is the basic version.
JAVASCRIPT 1 - Import jquery file<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>2 - This is the basics to get started
var pictures = []; $('#upload-pwer').on('change', '.insert-files', function () { // Scrolling through all the selected images in the input file $.each($(this)[0].files, function( index, image ) { // Saving images in array pictures.push(image); // Creating thumbnails of images var reader = new FileReader(); reader.onload = function(e) { var preLink = e.target.result; var itemIMG = '<div><img src="' + preLink + '" /></div>'; var insertIMG = $('#upload-pwer').prepend(itemIMG); } reader.readAsDataURL(image); }); });HTML1 - insert code basic content and button input file
<div id="upload-pwer"> <input class="insert-files" multiple type="file"> </div>