html文件夹ajax上传（包含进度条）+php代码
今天我们来介绍如何使用formdata通过ajax的形式将本地一个完整的多目录文件夹上传至服务端，后端采用的是php代码
首先我们看前端html，我们使用的是bfwone高性能插件加载库，直接引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<script id="bfwone" data="dep=jquery.17" type="text/BfwJavascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
<script>
var filetree = {};
var files = [];
function uploadfile() {
var fd = new FormData();
for (var i = 0; i < files.length; i++) {
fd.append("files[]", files[i]);
}
fd.append("filetree", JSON.stringify(filetree));
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "/upload.php");
xhr.send(fd);
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
} else {
document.getElementById('progressNumber').innerHTML = '无法计算';
}
}
function uploadComplete(evt) {
/* 当服务器响应后，这个事件就会被触发 */
alert(evt.target.responseText);
}
function uploadFailed(evt) {
alert("上传文件发生了错误尝试");
}
function uploadCanceled(evt) {
alert("上传被用户取消或者浏览器断开连接");
}
//var files = [];
bready(function() {
$("#filebro").change(function() {
filetree = [];
files = this.files;
for (var i = 0; i < this.files.length; i++) {
var filekey = this.files[i].name+this.files[i].size.toString();
filetree[filekey] = this.files[i].webkitRelativePath;
}
});
});
</script>
</head>
<body>
<div id="progressNumber"></div>
<form method="post" action="/upload.php" enctype="multipart/form-data">
<input id="filebro" type="file" name="files[]" id="files" multiple="" directory="" webkitdirectory="" mozdirectory="">
<input type="hidden" name="filetree" id="filetree" />
<input type="button" BfwOnclick="uploadfile();" value="ajax文件夹上传" />
</form>
</body>
</html>后端php代码
<?php
function createFolder($foldername)
{
$folders = explode("/", $foldername);
$path = 'upload';
$nFolders = count($folders);
for ($i = 0; $i < $nFolders; $i ++) {
$newFolder = '/' . $folders[$i];
$path .= $newFolder;
if (! file_exists($path) && ! is_dir($path)) {
mkdir($path);
}
}
}
$count = 0;
$_file_temp_info = [];
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
foreach ($_FILES['files']['name'] as $i => $name) {
if (strlen($_FILES['files']['name'][$i]) > 1) {
$_file_temp_info[$name . $_FILES['files']['size'][$i]] = 'upload/test/' . $name;
// var_dump($name);
if (move_uploaded_file($_FILES['files']['tmp_name'][$i], 'upload/test/' . $name)) {
$count ++;
}
}
}
}
$_filetree = $_POST['filetree'];
$_file_treearr = json_decode($_filetree, true);
foreach ($_file_treearr as $key => $val) {
if (isset($_file_temp_info[$key])) {
createFolder(dirname($val));
rename($_file_temp_info[$key], "upload/" . $val);
}
}
echo $count."个文件上传完成";
?>
{{collectdata}}
网友评论0