文章详情

  • 游戏榜单
  • 软件榜单
关闭导航
热搜榜
热门下载
热门标签
php爱好者> php教程>Js+php实现异步拖拽上传文件示例

Js+php实现异步拖拽上传文件示例

时间:2021-01-27  来源:互联网

本文给大家分享的是使用php结合js实现异步拖拽上传文件的代码,及示例,有需要的小伙伴可以参考下。

异步拖拽上传文件--小实例

upload.html

<!DOCTYPE html>

<!--

To change this license header, choose License Headers in Project Properties.

To change this template file, choose Tools | Templates

and open the template in the editor.

-->

<html>

  <head>

    <title>TODO supply a title</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>

      #box{

        width:150px;border: 1px solid red;

      }

    </style>

    <script type="text/javascript" src="XMLhttpReuest.js"></script>

    <script>

      window.onload = function () {

        var box = document.getElementById('box');

        box.ondragenter = function (e) {

          e.preventDefault();

        }

        box.ondragover = function (e) {

          e.preventDefault();

        }

        box.ondragleave = function (e) {

          e.preventDefault();

        }

        box.ondrop = function (e) {

          e.preventDefault();

          var file = e.dataTransfer.files[0];

          var formData = new FormData();

          formData.append('aa', file);

          var xml = ajaxFunction();

          xml.open("post", './upload.php', true);

          xml.send(formData);

          xml.onreadystatechange = function () {

            if (xml.readyState == 4 && xml.status == 200) {

              var flag = xml.responseText;

              console.log(flag);

              if (flag == 1) {

//                box.innerHTML="上传成功";

                alert('上传成功');

              }

            }

          }

        }

      }

    </script>

  </head>

  <body>

    <div id="box">

      请拖入上传的文件

    </div>

  </body>

</html>

upload.php

复制代码 代码如下:

<?php

header("Content-Type:text/html;charset=UTF-8");

if(is_uploaded_file($_FILES['aa']['tmp_name'])){

    move_uploaded_file($_FILES['aa']['tmp_name'], "./".iconv("UTF-8", "GBK", $_FILES['aa']['name']));

    echo '1';

}

 XMLhttpReuest.js

function ajaxFunction()

 {

 var xmlHttp;

 try

  {

  // Firefox, Opera 8.0+, Safari

  xmlHttp=new XMLHttpRequest();

  }

 catch (e)

  {

 // Internet Explorer

  try

   {

   xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

   }

  catch (e)

   {

   try

     {

     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

     }

   catch (e)

     {

     alert("您的浏览器不支持AJAX!");

     return false;

     }

   }

  }

  return xmlHttp;

}

以上所述就是本文的全部内容了,希望大家能够喜欢。

相关阅读更多 +
最近更新
排行榜 更多 +
元梦之星最新版手游

元梦之星最新版手游

棋牌卡牌 下载
我自为道安卓版

我自为道安卓版

角色扮演 下载
一剑斩仙

一剑斩仙

角色扮演 下载