1. [图片] 5375acf5gw1dusqsscfksj.jpg


​2. [代码][HTML]代码

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>OSCTools JsBin在线演示-HTML5 Drag & Drop 多文件上传 from Script Tutorials</title>
        <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      <style>
        .container {
            overflow:hidden;
            width:960px;
            margin:20px auto;
        }
        .contr {
            background-color: #212121;
            color: #FFFFFF;
            padding: 10px 0;
            text-align: center;
         
            border-radius:10px 10px 0 0;
            -moz-border-radius:10px 10px 0 0;
            -webkit-border-radius:10px 10px 0 0;
        }
        .upload_form_cont {
            background: -moz-linear-gradient(#ffffff, #f2f2f2);
            background: -ms-linear-gradient(#ffffff, #f2f2f2);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
            background: -webkit-linear-gradient(#ffffff, #f2f2f2);
            background: -o-linear-gradient(#ffffff, #f2f2f2);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2')";
            background: linear-gradient(#ffffff, #f2f2f2);
         
            color: #000;
            overflow: hidden;
        }
        .info {
            background-color: #EEEEEE;
            border: 1px solid #DDDDDD;
            float: left;
            font-weight: bold;
            height: 530px;
            margin: 20px;
            position: relative;
            width: 560px;
        }
        .info > div {
            font-size: 14px;
            font-weight: bold;
            padding: 10px 15px 5px;
        }
        .info > h2 {
            padding: 0 15px;
        }
        .info > canvas {
            margin-left: 15px;
            margin-bottom: 10px;
        }
        .info #url {
            width: 400px;
        }
        #dropArea {
            background-color: #DDDDDD;
            border: 3px dashed #000000;
            float: left;
            font-size: 48px;
            font-weight: bold;
            height: 530px;
            line-height: 530px;
            margin: 20px;
            position: relative;
            text-align: center;
            width: 300px;
        }
        #dropArea.hover {
            background-color: #CCCCCC;
        }
        #dropArea.uploading {
            background: #EEEEEE url(loading.gif) center 30% no-repeat;
        }
        #result .s, #result .f {
            font-size: 12px;
            margin-bottom: 10px;
            padding: 10px;
         
            border-radius:10px;
            -moz-border-radius:10px;
            -webkit-border-radius:10px;
        }
        #result .s {
            background-color: #77fc9f;
        }
        #result .f {
            background-color: #fcc577;
        }
 
      </style>
  </head>
    <body>
    <div class="container">
      <div class="contr"><h2><a href='http://www.osctools.net/' target='_blank' style='color:white;'>osctools</a>: 将你的图片拖拽到“Drop区域”(一次最多上传五个, 文件大小小于256kb)</h2></div>
        <div class="upload_form_cont">
            <div id="dropArea">文件拖到这里</div>
            <div class="info">
                <div>上传文件剩余: <span id="count">0</span></div>
                <div>上传目录: <input id="url" value="http://www.script-tutorials.com/demos/257/upload.php"/></div>
                <h2>结果:</h2>
                <div id="result"></div>
                <canvas width="500" height="20"></canvas>
            </div>
        </div>
    </div>
    </body>
</html>
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);
    }http://www.huiyi8.com/huawen/​
 
    // 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 += '<div class="f">文件过大 (max filesize exceeded)</div>';
                handleComplete(nextFile.size);
            } else {
                uploadFile(nextFile, status);
            }
        } else {
            dropArea.className = '';
        }
    }
 
    initHandlers();
})();

HTML5 实现文件拖放上传的更多相关文章

  1. 赞!带进度条的 jQuery 文件拖放上传插件

    jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果.作者编写这个插件的想法是要保持它非常简单,不像其他的插件,很多的标记,并提供一些 H ...

  2. 带进度条的 jQuery 文件拖放上传插件

    jQuery File Uploader :jQuery File Uploader 是一个 jQuery 文件拖放上传插件 兼容性判断 下载:https://github.com/danielm/u ...

  3. html5 实现 文件夹上传

    先插个背景:最近所在项目有个小需求,就是上传文件要可以同时选择文件夹及文件,然后把文件夹内得文件及所选单文件全部选择上传,借助于搜索关键词没搜到想要的结果(相关文章貌似很好,要么就是遍历文件夹内的文件 ...

  4. 【方法】Html5实现文件异步上传

    1 简介 开发文件上传功能从来不是一件愉快的事,异步上传更是如此,使用过iframe和Flash的上传方案,也都感觉十分的别扭.本文简要简绍利用Html5的FormData实现文件的异步上传,还可以实 ...

  5. 【实用】Html5实现文件异步上传

    1 简介 开发文件上传功能从来不是一件愉快的事,异步上传更是如此,使用过iframe和Flash的上传方案,也都感觉十分的别扭.本文简要简绍利用Html5的FormData实现文件的异步上传,还可以实 ...

  6. HTML实现文件拖动上传

    在大型企业的开发过程中,很多比较有趣而实际的功能往往都是让大家望而却步,我给大家带来一个百度云盘和360云盘的HTML5多文件拖动上传技术: 1:记得导入:common-fileupload.jar包 ...

  7. js分割文件快速上传

    <?php header('Content-type:text/html;charset=UTF-8'); ?> <?php if ($_FILES) { if(!file_exis ...

  8. 利用Jquery使用HTML5的FormData属性实现对文件的上传

    1.利用Jquery使用HTML5的FormData属性实现对文件的上传 在HTML5以前我们如果需要实现文件上传服务器等功能的时候,有时候我们不得不依赖于FLASH去实现,而在HTML5到来之后,我 ...

  9. HTML5+J2EE实现文件异步上传

    P.S. HTML5经过了W3C的8年努力,终于正式推广了.这次升级最大的就是升级了XMLHTTPRequest,让它变成了XMLHTTPRequest Level II(这有啥奇怪的?).这个对象现 ...

随机推荐

  1. Extjs grid增加或删除列后记住滚动条的位置

    IE下验证好使. { text: "Del", icon: 'Scripts/Ext/resources/images/icons/application_form_delete. ...

  2. GitBook一个专注于帮助文档的工具

    官网:https://www.gitbook.com GitHub组织:https://github.com/gitbookio GitBook一个专注于帮助文档的工具,比如: 1.简单的左侧列表右侧 ...

  3. 谈oracle数据比对(DBMS_COMPARISON)

    今天是2014-08-19,我今天收到csdn给我发的申请博客专家的邀请,自己感觉实在羞愧啊. 自从换了工作也一直没有精力在写点东西了.今天我一个同事,在群里贴出了一个数据比对的包(DBMS_COMP ...

  4. hdu杭电1856 More is better【并查集】

    Problem Description Mr Wang wants some boys to help him with a project. Because the project is rathe ...

  5. angular - 新建项目 - 2

    ng new testNg 新建项目后,从网络上拉取模板(最后缓存下来,我们下次创建项目的时间将会减少80%) 安装过程中,需要我们提供Git账号和姓名 最后,我们进入 useNg 然后,启动服务器 ...

  6. JS推断浏览器类型与版本号

    在JS中推断浏览器的类型,预计是每一个编辑过页面的开发者都遇到过的问题.在众多的浏览器产品中.IE.Firefox.Opera.Safari........众多品牌却标准不一,因此时常须要依据不同的浏 ...

  7. 使用match、test控制输入字符格式后键盘向左向右键光标自动定位解决

    直接举例说明(正则表达式替换红色区域即可) /** * 判断是否位数字 * @param obj 数字 */ function numOnly(obj) { if(!(/^\d*$/.test(obj ...

  8. mysql 执行sql文件的方法

     http://philos.iteye.com/blog/162051   实战代码: #mysql导入mysql -um4n -p01D060A476642BA8335B832AC5B211F22 ...

  9. python 写数据到txt 文件

    # coding=utf-8 import codecs # list = [[1,2],[3,4]] list = ['{"PN":"34VT123",&qu ...

  10. DM8168 unrecoverable error: OMX_ErrorBadParameter (0x80001005) [resolved]

    DM8168 custom board 成功启动系统之后想先測一下8168编解码功能,把开发包里的examples跑一遍.启动完毕后.连上HDMI显示,在starting Matrix GUI app ...