使用 JavaScript File API 实现文件上传

原文:http://www.oschina.net/code/snippet_12_3073

function addDNDListeners(){

    var container = document.getElementById("container");

    var fileList = document.getElementById("fileList");

    container.addEventListener("dragenter", function(event){

        fileList.innerHTML ='';

        event.stopPropagation();

        event.preventDefault();

        }, false);

    container.addEventListener("dragover", function(event){

        event.stopPropagation();

        event.preventDefault();

        }, false);

    container.addEventListener("drop", handleDrop, false);

}

function handleDrop(event){

    var files = event.dataTransfer.files;

    event.stopPropagation();

    event.preventDefault();

     

    var fileList = document.getElementById("fileList");

    for (var i = 0; i < files.length; i++) {

        var file = files[i];

        var li = document.createElement('li');

        var progressbar = document.createElement('div');

        var img = document.createElement('img');

        var name = document.createElement('span');

        progressbar.className = "progressBar";

        img.src = files[i].getAsDataURL();

        img.width = 32;

        img.height = 32;                   

        name.innerHTML = file.name;

        li.appendChild(img);           

        li.appendChild(name);

        li.appendChild(progressbar);

        fileList.appendChild(li);

        uploadFile(file, progressbar)

    }

}

function uploadFile(file, progressbar) {

    var xhr = new XMLHttpRequest();

    var upload = xhr.upload;

     

    var p = document.createElement('p');

    p.textContent = "0%";

    progressbar.appendChild(p);

    upload.progressbar = progressbar;              

    upload.addEventListener("progress", uploadProgress, false);

    upload.addEventListener("load", uploadSucceed, false);

    upload.addEventListener("error", uploadError, false);

    xhr.open("POST", "upload.jsp?fileName="+file.name);

    xhr.overrideMimeType("application/octet-stream");

    xhr.sendAsBinary(file.getAsBinary());

}

function uploadProgress(event){            

    if (event.lengthComputable) {

        var percentage = Math.round((event.loaded * 100) / event.total);

        console.log("percentage:" + percentage);

        if (percentage < 100) {

            event.target.progressbar.firstChild.style.width = (percentage*2) + "px";

            event.target.progressbar.firstChild.textContent = percentage + "%";

        }

    }

}

function uploadSucceed(event) {

    event.target.progressbar.firstChild.style.width = "200px";

    event.target.progressbar.firstChild.textContent = "100%";

}          

function uploadError(error) {

    alert("error: " + error);

}

window.addEventListener("load", addDNDListeners, false);