upload

test

by sacredhawk

HTML

<input type="file" id="your-files-input" multiple>
<div id="your-files"></div>

CSS

#your-files{
    width: 400px;
    height: 400px;
    border: 5px solid #333;        
}

JavaScript

var target = document.getElementById("your-files");

target.addEventListener("dragover", function(event) {
    event.preventDefault();
}, false);

target.addEventListener("drop", function(event) {
    // cancel default actions
    event.preventDefault();
    var i = 0,
    files = event.dataTransfer.files,
    len = files.length;
    for (; i < len; i++) {
        console.log("Filename: "+ files[i].name);
        console.log("Type: "+ files[i].type);
        console.log("Size: "+ files[i].size + "bytes");
        HandlerUploadData(files[i]);
    }
}, false);



var control = document.getElementById("your-files-input");
control.addEventListener("change", function(event) {
    // When the control has changed, there are new files
    var i = 0,
    files = control.files,
    len = files.length;
    for (; i < len; i++) {
        console.log("Filename: "+ files[i].name);
        console.log("Type: "+ files[i].type);
        console.log("Size: "+ files[i].size + "bytes");
        HandlerUploadData(files[i]);
    }
}, false);


var HandlerUploadData = function(file){
    var reader = new FileReader();
    reader.onload = function(event){
        var dataUri = event.target.result,
            img = document.createElement("img");
        
        img.src = dataUri;
        document.body.appendChild(img);
    }
    
    reader.readAsDataURL(file);    
}