HTML5 实现文件拖放上传

1. [图片] 5375acf5gw1dusqsscfksj.jpg    

2. [代码][HTML]代码     



   
       
       
       
     
 
   
   

     

osctools: 将你的图片拖拽到“Drop区域”(一次最多上传五个, 文件大小小于256kb)

       

           

文件拖到这里

           

               

上传文件剩余: 0

               

上传目录:

               

结果:

               

               
           

       

   

   

3. [代码][JavaScript]代码    
// variables
var dropArea = document.getElementById('dropArea');
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
var count = document.getElementById('count');
var destinationUrl = document.getElementById('url');
var result = document.getElementById('result');
var list = [];
var totalSize = 0;
var totalProgress = 0;
 
// main initialization
(function(){
 
    // init handlers
    function initHandlers() {
        dropArea.addEventListener('drop', handleDrop, false);
        dropArea.addEventListener('dragover', handleDragOver, false);
    }
 
    // draw progress
    function drawProgress(progress) {
        context.clearRect(0, 0, canvas.width, canvas.height); // clear context
 
        context.beginPath();
        context.strokeStyle = '#4B9500';
        context.fillStyle = '#4B9500';
        context.fillRect(0, 0, progress * 500, 20);
        context.closePath();
 
        // draw progress (as text)
        context.font = '16px Verdana';
        context.fillStyle = '#000';
        context.fillText('上传进度: ' + Math.floor(progress*100) + '%', 50, 15);
    }
 
    // drag over
    function handleDragOver(event) {
        event.stopPropagation();
        event.preventDefault();
 
        dropArea.className = 'hover';
    }
 
    // drag drop
    function handleDrop(event) {
        event.stopPropagation();
        event.preventDefault();
 
        processFiles(event.dataTransfer.files);
    }
 
    // process bunch of files
    function processFiles(filelist) {
        if (!filelist || !filelist.length || list.length) return;
 
        totalSize = 0;
        totalProgress = 0;
        result.textContent = '';
 
        for (var i = 0; i < filelist.length && i < 5; i++) {
            list.push(filelist[i]);
            totalSize += filelist[i].size;
        }
        uploadNext();
    }
 
    // on complete - start next file
    function handleComplete(size) {
        totalProgress += size;
        drawProgress(totalProgress / totalSize);
        uploadNext();
    }
 
    // update progress
    function handleProgress(event) {
        var progress = totalProgress + event.loaded;
        drawProgress(progress / totalSize);
    }
 
    // upload file
    function uploadFile(file, status) {
 
        // prepare XMLHttpRequest
        var xhr = new XMLHttpRequest();
        xhr.open('POST', destinationUrl.value);
        xhr.onload = function() {
            result.innerHTML += this.responseText;
            handleComplete(file.size);
        };
        xhr.onerror = function() {
            result.textContent = this.responseText;
            handleComplete(file.size);
        };
        xhr.upload.onprogress = function(event) {
            handleProgress(event);
        }
        xhr.upload.onloadstart = function(event) {
        }
 
        // prepare FormData
        var formData = new FormData();
        formData.append('myfile', file);
        xhr.send(formData);
    }
 
    // upload next file
    function uploadNext() {
        if (list.length) {
            count.textContent = list.length - 1;
            dropArea.className = 'uploading';
 
            var nextFile = list.shift();
            if (nextFile.size >= 262144) { // 256kb
                result.innerHTML += '

文件过大 (max filesize exceeded)

';
                handleComplete(nextFile.size);
            } else {
                uploadFile(nextFile, status);
            }
        } else {
            dropArea.className = '';
        }
    }
 
    initHandlers();
})();