html文件夹ajax上传(包含进度条)+php代码

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%

{{collectdata}}

网友评论0