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

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

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;height: 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;

}

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

以上是 Js+php实现异步拖拽上传文件 的全部内容, 来源链接: utcz.com/z/325817.html

回到顶部