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 = '无法计算';
}
...点击查看剩余70%
网友评论0