码迷,mamicode.com
首页 > Web开发 > 详细

html5---上传文件

时间:2015-05-12 09:34:27      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:上传文件   html5   

<!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>

html5---上传文件

标签:上传文件   html5   

原文地址:http://blog.csdn.net/sjtu_chenchen/article/details/45649391

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!