html5---上传文件

实现拖拽文件上传功能

原创于 2015-05-11 21:35:28 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#上传文件 #html5

HTML5 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用HTML5的drag and drop API实现文件拖拽上传的方法。通过JavaScript监听div元素的dragenter、dragover、dragleave及drop事件，实现了文件的拖放交互，并通过FormData对象发送POST请求完成文件上传。

<!DOCTYPE HTML>
<html>
    <head>
        <style>
         #box{
         width:150px;height:150px;border:1px dashed red;
         font-size:13px;line-height:150px;text-align:center;
         }
        </style>
        <script>
         window.onload=function  () {
          var box=document.getElementById("box");
          box.ondragenter=function  (e) {
          e.preventDefault()
          }
          box.ondragover=function  (e) {
          box.innerHTML="请松开"
           e.preventDefault()
          }
          box.ondragleave=function  (e) {
           box.innerHTML="请拖入上传的文件"
          e.preventDefault()
          }
          box.ondrop=function  (e) {
          var file=e.dataTransfer.files[0];
          var formData=new FormData(); 
           formData.append("aa",file);
          var xml=new XMLHttpRequest();
          xml.open("post","up.php");
          xml.send(formData);
           e.preventDefault()
          }
         }
        </script>
    </head>
    <body>
       <div id="box">
         请拖入上传的文件
       </div>
    </body>
</html>