html5实现拖拽文件上传

时间2024-01-25 11:00:20发布访客分类HTML浏览398

导读：收集整理的这篇文章主要介绍了html5教程-html5实现拖拽文件上传，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 htML文件 [html]...

收集整理的这篇文章主要介绍了html5教程-html5实现拖拽文件上传，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

htML文件

[html]
!DOCTYPE html PubLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
html XMlns="https://www.w3.org/1999/xhtml" lang="zh-CN">
head>
tITle> HTML5拖拽上传/title>
meta http-equiv="Content-type" content="text/html; charset=utf-8" />
meta name="description" content="" />
meta name="keywords" content="" />
style type="text/css">

#dropzone{
width:300px;
height:300px;
border:2px dashed gray;
}

#dropzone.over {
border:2px dashed orange;
}

/style>
/head>
    body>
        h1> 拖拽上传/h1>
        p id="dropzone"> /p>
    /body>

    script type="text/javascript">

    // 负责ajax发送数据
    function up(fd) {
        VAR xhr = new XMLHttPRequest();
        xhr.open('POST','upfile.php',true); // 异步传输

        // xhr.upload 这是html5新增的api,储存了上传过程中的信息
        xhr.upload.onprogress = function (ev) {
            var percent = 0;
            if(ev.lengthComputable) {
                percent = 100 * ev.loaded/ev.total;
                //document.getElementById('progress').innerHTML = percent;
                document.getElementById('bar').style.width = percent + '%';
            }
        }

        xhr.send(fd);
    }

var dz = document.getElementById('dropzone');
dz.onDragover = function (ev) {
    this.classname = 'over';
    return false;
}

dz.ondragleave = function (){
    this.className = '';
}

dz.ondrop = function(ev) {
    //console.LOG(ev.datatransfer.files[0]);

    var fd = new FormData();
    fd.append('pic',ev.dataTransfer.files[0]);

    up(fd);

    return false; // 拦截拖放的正常行为
}

/script>
/html>

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
html xmlns="https://www.w3.org/1999/xhtml" lang="zh-CN">
head>
title> HTML5拖拽上传/title>
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
meta name="description" content="" />
meta name="keywords" content="" />
style type="text/css">

#dropzone{
width:300px;
height:300px;
border:2px dashed gray;
}

#dropzone.over {
border:2px dashed orange;
}

/style>
/head>
    body>
        h1> 拖拽上传/h1>
        p id="dropzone"> /p>
    /body>

script type="text/javascript">

    // 负责ajax发送数据
    function up(fd) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST','upfile.php',true); // 异步传输

        // xhr.upload 这是html5新增的api,储存了上传过程中的信息
        xhr.upload.onprogress = function (ev) {
            var percent = 0;
            if(ev.lengthComputable) {
                percent = 100 * ev.loaded/ev.total;
                //document.getElementById('progress').innerHTML = percent;
                document.getElementById('bar').style.width = percent + '%';
            }
        }

xhr.send(fd);
}

var dz = document.getElementById('dropzone');
dz.ondragover = function (ev) {
this.className = 'over';
return false;
}

dz.ondragleave = function (){
this.className = '';
}

dz.ondrop = function(ev) {
//console.log(ev.dataTransfer.files[0]);

var fd = new FormData();
fd.append('pic',ev.dataTransfer.files[0]);

up(fd);

return false; // 拦截拖放的正常行为
}

/script>
/html>
upfile.php

[php]
echo move_uploaded_file($_FILES['pic']['tmp_name'],'./upload/' . $_FILES['pic']['name']) ? 'OK':'fail';

echo move_uploaded_file($_FILES['pic']['tmp_name'],'./upload/' . $_FILES['pic']['name']) ? 'OK':'fail';
如图：

html文件

[html]
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
html xmlns="https://www.w3.org/1999/xhtml" lang="zh-CN">
head>
title> HTML5拖拽上传/title>
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
meta name="description" content="" />
meta name="keywords" content="" />
style type="text/css">

#dropzone{
width:300px;
height:300px;
border:2px dashed gray;
}

#dropzone.over {
border:2px dashed orange;
}

/style>
/head>
    body>
        h1> 拖拽上传/h1>
        p id="dropzone"> /p>
    /body>

    script type="text/javascript">

    // 负责ajax发送数据
    function up(fd) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST','upfile.php',true); // 异步传输

        // xhr.upload 这是html5新增的api,储存了上传过程中的信息
        xhr.upload.onprogress = function (ev) {
            var percent = 0;
            if(ev.lengthComputable) {
                percent = 100 * ev.loaded/ev.total;
                //document.getElementById('progress').innerHTML = percent;
                document.getElementById('bar').style.width = percent + '%';
            }
        }

        xhr.send(fd);
    }

var dz = document.getElementById('dropzone');
dz.ondragover = function (ev) {
    this.className = 'over';
    return false;
}

dz.ondragleave = function (){
    this.className = '';
}

dz.ondrop = function(ev) {
    //console.log(ev.dataTransfer.files[0]);

    var fd = new FormData();
    fd.append('pic',ev.dataTransfer.files[0]);

    up(fd);

    return false; // 拦截拖放的正常行为
}

/script>
/html>