js 即时上传php_Js+php实现异步拖拽上传文件

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

upload.html

TODO supply a title

#box{

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

}

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('上传成功');

}

}

}

}

}

请拖入上传的文件

upload.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;

}

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