当前位置：首页 → 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>

<style>

#box{

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

}

</style>

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>

</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;

}

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

今日更新

php获取字符串中各个字符出现次数的方法
阅读：22
PHP获取数组长度或某个值出现次数的方法
阅读：28
php查找字符串出现次数的方法
阅读：28
php计算数组相同值出现次数的代码(array_count_values)
阅读：23
php合并数组中相同元素的方法
阅读：22
php接口实现拖拽排序功能
阅读：21
军师请布阵项羽技能强度怎么样？项羽玩法介绍！
阅读：20
军师请布阵韩信技能强度怎么样？韩信玩法介绍！
阅读：19
芈月白晶晶皮肤上线：实锤！至尊宝白晶晶才是一对
阅读：21
LPL联赛将要上演冠军之周，各个时代的王者轮番登场，你最看好谁？
阅读：19

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

今日更新

热门下载