文件拖拽不用ajax,ajax简单实现拖拽上传文件

码农公社  210.net.cn  210是何含义？10月24日是程序员节，1024 =210、210既

210

之意。

AJAX拖拽上传功能实现，供大家参考，具体内容如下

html>

Document

.box {

width: 300px;

height: 300px;

border: 1px solid #000;

text-align: center;

line-height: 300px;

font-size: 40px;

}

+

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

box.ondragover = function (e) {

e.preventDefault();

}

box.ondrop = function (e) {

console.log(e.dataTransfer)

e.preventDefault();

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {

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

console.log(xhr.responseText)

}

}

xhr.open('POST', './server.php', true);

var formdata = new FormData();

formdata.append('pic', e.dataTransfer.files[0]);

formdata.append('name', 'luyao');

xhr.send(formdata);

}

server.php

$rand = rand(1,1000).'.jpg';

move_uploaded_file($_FILES['pic']['tmp_name'], './uploads/'.$rand);

echo '/uploads/'.$rand;