Code: 8

Manutenção Multiple Uploads FIle.

by Lucas Fontes Gaspareto

HTML

<input type="file" id="files" multiple>
<p id="lenFiles"><p>
<div id="listFiles"></div>
<button id="send">Enviar</button>

CSS

img {
    display: block;
    margin-top: 5px;
    width: 100px;
}

button {
    margin-top: 5px;
}

JavaScript

'use strict'

var APIFiles = {
    files: [],
    select: function(e) {
        if(this.files.length > 1) {
            for(var i = this.files.length; i > 0; i--) {
                this.files.splice(i, 1);
                document.getElementsByTagName('img')[0].remove();
            }
        }

        var tempArray = [];
        [].forEach.call(e.target.files, function(file, index) {            
            tempArray.push(file);
            var reader = new FileReader();
            reader.onload = function(e) {
                var nodeImg = document.createElement('img');
                nodeImg.setAttribute('src', e.target.result);
                nodeImg.setAttribute('id', index);
                nodeImg.setAttribute('data', 'img');
                document.getElementById('listFiles').appendChild(nodeImg);
            }; 
            reader.readAsDataURL(file);
        });
        this.files = tempArray;
    },
    send: function(e) {
        e.preventDefault();
        var data = new FormData();
        this.files.forEach(function(file) {
            data.append('files', file);
        });
        // Send FormData with XMLHttpRequest
    },
    remove: function(e) {
        this.files.splice(e.target.id,1);
        document.getElementById('listFiles').removeChild(e.target);
    }
};

document.getElementById('files').addEventListener('change', function(e) {
    APIFiles.select(e);
});

window.addEventListener('click', function(e) {
    if(e.target.id === 'send')
        APIFiles.send(e)
   	else if(e.target.getAttribute('data') === 'img')
    	APIFiles.remove(e);
});