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

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

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;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。