HTML5 实现文件拖放上传

roydocs 2013-09-12

展开全文

1. [图片] 5375acf5gw1dusqsscfksj.jpg

2. [代码][HTML]代码跳至 [2] [3] [全屏预览]

001<!DOCTYPE html>
002<html lang="en" >
003    <head>
004        <meta charset="utf-8" />
005        <title>OSCTools JsBin在线演示-HTML5 Drag & Drop 多文件上传 from Script Tutorials</title>
006        <script class="jsbin" src="http://ajax./ajax/libs/jquery/1/jquery.min.js"></script>
007      <style>
008        .container {
009            overflow:hidden;
010            width:960px;
011            margin:20px auto;
012        }
013        .contr {
014            background-color: #212121;
015            color: #FFFFFF;
016            padding: 10px 0;
017            text-align: center;
018         
019            border-radius:10px 10px 0 0;
020            -moz-border-radius:10px 10px 0 0;
021            -webkit-border-radius:10px 10px 0 0;
022        }
023        .upload_form_cont {
024            background: -moz-linear-gradient(#ffffff, #f2f2f2);
025            background: -ms-linear-gradient(#ffffff, #f2f2f2);
026            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
027            background: -webkit-linear-gradient(#ffffff, #f2f2f2);
028            background: -o-linear-gradient(#ffffff, #f2f2f2);
029            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2');
030            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2')";
031            background: linear-gradient(#ffffff, #f2f2f2);
032         
033            color: #000;
034            overflow: hidden;
035        }
036        .info {
037            background-color: #EEEEEE;
038            border: 1px solid #DDDDDD;
039            float: left;
040            font-weight: bold;
041            height: 530px;
042            margin: 20px;
043            position: relative;
044            width: 560px;
045        }
046        .info > div {
047            font-size: 14px;
048            font-weight: bold;
049            padding: 10px 15px 5px;
050        }
051        .info > h2 {
052            padding: 0 15px;
053        }
054        .info > canvas {
055            margin-left: 15px;
056            margin-bottom: 10px;
057        }
058        .info #url {
059            width: 400px;
060        }
061        #dropArea {
062            background-color: #DDDDDD;
063            border: 3px dashed #000000;
064            float: left;
065            font-size: 48px;
066            font-weight: bold;
067            height: 530px;
068            line-height: 530px;
069            margin: 20px;
070            position: relative;
071            text-align: center;
072            width: 300px;
073        }
074        #dropArea.hover {
075            background-color: #CCCCCC;
076        }
077        #dropArea.uploading {
078            background: #EEEEEE url(loading.gif) center 30% no-repeat;
079        }
080        #result .s, #result .f {
081            font-size: 12px;
082            margin-bottom: 10px;
083            padding: 10px;
084         
085            border-radius:10px;
086            -moz-border-radius:10px;
087            -webkit-border-radius:10px;
088        }
089        #result .s {
090            background-color: #77fc9f;
091        }
092        #result .f {
093            background-color: #fcc577;
094        }
095 
096      </style>
097  </head>
098    <body>
099    <div class="container">
100      <div class="contr"><h2><a href='http://www./' target='_blank' style='color:white;'>osctools</a>: 将你的图片拖拽到“Drop区域”(一次最多上传五个, 文件大小小于256kb)</h2></div>
101        <div class="upload_form_cont">
102            <div id="dropArea">文件拖到这里</div>
103            <div class="info">
104                <div>上传文件剩余: <span id="count">0</span></div>
105                <div>上传目录: <input id="url" value="http://www./demos/257/upload.php"/></div>
106                <h2>结果:</h2>
107                <div id="result"></div>
108                <canvas width="500" height="20"></canvas>
109            </div>
110        </div>
111    </div>
112    </body>
113</html>

3. [代码][JavaScript]代码跳至 [2] [3] [全屏预览]

001// variables
002var dropArea = document.getElementById('dropArea');
003var canvas = document.querySelector('canvas');
004var context = canvas.getContext('2d');
005var count = document.getElementById('count');
006var destinationUrl = document.getElementById('url');
007var result = document.getElementById('result');
008var list = [];
009var totalSize = 0;
010var totalProgress = 0;
011 
012// main initialization
013(function(){
014 
015    // init handlers
016    function initHandlers() {
017        dropArea.addEventListener('drop', handleDrop, false);
018        dropArea.addEventListener('dragover', handleDragOver, false);
019    }
020 
021    // draw progress
022    function drawProgress(progress) {
023        context.clearRect(0, 0, canvas.width, canvas.height); // clear context
024 
025        context.beginPath();
026        context.strokeStyle = '#4B9500';
027        context.fillStyle = '#4B9500';
028        context.fillRect(0, 0, progress * 500, 20);
029        context.closePath();
030 
031        // draw progress (as text)
032        context.font = '16px Verdana';
033        context.fillStyle = '#000';
034        context.fillText('上传进度: ' + Math.floor(progress*100) + '%', 50, 15);
035    }
036 
037    // drag over
038    function handleDragOver(event) {
039        event.stopPropagation();
040        event.preventDefault();
041 
042        dropArea.className = 'hover';
043    }
044 
045    // drag drop
046    function handleDrop(event) {
047        event.stopPropagation();
048        event.preventDefault();
049 
050        processFiles(event.dataTransfer.files);
051    }
052 
053    // process bunch of files
054    function processFiles(filelist) {
055        if (!filelist || !filelist.length || list.length) return;
056 
057        totalSize = 0;
058        totalProgress = 0;
059        result.textContent = '';
060 
061        for (var i = 0; i < filelist.length && i < 5; i++) {
062            list.push(filelist[i]);
063            totalSize += filelist[i].size;
064        }
065        uploadNext();
066    }
067 
068    // on complete - start next file
069    function handleComplete(size) {
070        totalProgress += size;
071        drawProgress(totalProgress / totalSize);
072        uploadNext();
073    }
074 
075    // update progress
076    function handleProgress(event) {
077        var progress = totalProgress + event.loaded;
078        drawProgress(progress / totalSize);
079    }
080 
081    // upload file
082    function uploadFile(file, status) {
083 
084        // prepare XMLHttpRequest
085        var xhr = new XMLHttpRequest();
086        xhr.open('POST', destinationUrl.value);
087        xhr.onload = function() {
088            result.innerHTML += this.responseText;
089            handleComplete(file.size);
090        };
091        xhr.onerror = function() {
092            result.textContent = this.responseText;
093            handleComplete(file.size);
094        };
095        xhr.upload.onprogress = function(event) {
096            handleProgress(event);
097        }
098        xhr.upload.onloadstart = function(event) {
099        }
100 
101        // prepare FormData
102        var formData = new FormData();
103        formData.append('myfile', file);
104        xhr.send(formData);
105    }
106 
107    // upload next file
108    function uploadNext() {
109        if (list.length) {
110            count.textContent = list.length - 1;
111            dropArea.className = 'uploading';
112 
113            var nextFile = list.shift();
114            if (nextFile.size >= 262144) { // 256kb
115                result.innerHTML += '<div class="f">文件过大 (max filesize exceeded)</div>';
116                handleComplete(nextFile.size);
117            } else {
118                uploadFile(nextFile, status);
119            }
120        } else {
121            dropArea.className = '';
122        }
123    }
124 
125    initHandlers();
126})();

HTML5 实现文件拖放上传

2. [代码][HTML]代码 跳至 [2] [3] [全屏预览]

3. [代码][JavaScript]代码 跳至 [2] [3] [全屏预览]

2. [代码][HTML]代码跳至 [2] [3] [全屏预览]

3. [代码][JavaScript]代码跳至 [2] [3] [全屏预览]