html5
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

html5教程-html5实现拖拽文件上传

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

htML文件


[html]
<!DOCTYPE html PubLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">&nbsp;
<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';
如图：

 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';
如图：

 html5实现拖拽文件上传
 

 

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-html5实现拖拽文件上传全部内容，希望文章能够帮你解决html5教程-html5实现拖拽文件上传所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：AJAXAPIAPIClassCSSCSSdivHTMLhtml5html5post-format-gallerythis
猜你在找的html5相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新html5教程
热门html5教程