Živá ukázka

Výsledek

HTML

Autoformát
Standardní režim
Mobilní zobrazení

CSS

Autoformát
CSS reset
Až na konci

function prevent(e) {
    e = e || event;
    e.preventDefault();
}

window.addEventListener("dragover", prevent, false);
window.addEventListener("drop", prevent, false);

function runUpload(e) {
    var files = e.dataTransfer.files;
    file = files[0];
    uploadFileInfo.innerHTML = file.name + "<br>";
    uploadFileInfo.innerHTML+= Math.round(file.size / 1000 / 1000) + " MB";
    loadFile(file);
}

var uploadStav = document.getElementById("upload-stav");
var uploadText = document.getElementById("upload-text");
var uploadFileInfo = document.getElementById("upload-fileinfo");

var chunk = 0;
function loadFile(file) {
	var chunkSize = 1000 * 1000; // Velikost jedné části
	var chunks = Math.ceil(file.size / chunkSize);
    var reader = new FileReader();

var start, end;
    start = chunk * chunkSize;
    if (start > file.size) {
        start = end + 1;
    }
    end = start + (chunkSize) >= file.size ? file.size : start + (chunkSize);

reader.onload = function (e) {
    	// Ve sliceData je část souboru k odeslání AJAXem na server
    	var sliceData = e.target.result;
    	
    	// Jen výpis obsahu do stránky, že to funguje
    	uploadStav.style.width = chunk / chunks * 100  + "%";
    	uploadText.innerHTML = Math.round(chunk / chunks * 100)  + " %";

chunk++;
        if (chunk <= chunks) {
        	loadFile(file);	        	
        }
        else {
            uploadText.innerHTML = "Hotovo";
            uploadText.style.background = "lightgreen";
        }
    };
    reader.readAsDataURL(file.slice(start, end));    
}

JS

Autoformát
jQuery
Umístění JS