这是我在 php 中上传文件夹的代码，它工作得很好，但我想通过 php 文件中的 jquery ajax 调用来实现，所以任何人都可以帮助我，我该怎么办？因为这是我的大学项目，我的项目是基于类似驱动器的，或者你可以说 ftp，在那里你可以共享、上传、下载、删除文件和文件夹。
1.upload_folder.php
<html>
<head>
<title>Upload Folder using PHP </title>
</head>
<body>
<form action="#" method="post" enctype="multipart/form-data">
Type Folder Name:<input type="text" name="foldername" /><br/><br/>
Select Folder to Upload: <input type="file" name="files[]" id="files" multiple directory="" webkitdirectory="" moxdirectory="" /><br/><br/>
<input type="Submit" value="Upload" name="upload" />
</form>
</body>
</html>
ok 所以这是我的 file_upload 逻辑是这样的 上传文件夹.php
<?php
if(isset($_POST['upload']))
{
if($_POST['foldername'] != "")
{
$foldername=$_POST['foldername'];
if(!is_dir($foldername)) mkdir($foldername);
foreach($_FILES['files']['name'] as $i => $name)
{
if(strlen($_FILES['files']['name'][$i]) > 1)
{ move_uploaded_file($_FILES['files']['tmp_name'][$i],$foldername."/".$name);
}
}
echo "Folder is successfully uploaded";
}
else
echo "Upload folder name is empty";
}
?>
ok 所以这是我的 file_uploding 过程逻辑，这是我为此付出的努力 1.file_upload_dashbord.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Drive/fileupload</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.hasImage:hover section {
background-color: #F3FCFC;
}
.hasImage:hover button:hover {
background: rgba(5, 5, 5, 0.45);
}
#overlay p,
i {
opacity: 0;
}
#overlay.draggedover {
background-color: rgba(255, 255, 255, 0.7);
}
#overlay.draggedover p,
#overlay.draggedover i {
opacity: 1;
}
.group:hover .group-hover\:text-blue-800 {
color: #2b6cb0;
}
</style>
</head>
<body>
<div id="Modal" class="flex hidden justify-center mt-8">
<div class="rounded-lg shadow-xl bg-gray-50 lg:w-1/2">
<div class="m-4">
<label class="inline-block mb-2 text-gray-500">Upload Image(jpg,png,svg,jpeg)</label>
<div class="flex items-center justify-center w-full">
<label class="flex flex-col w-full h-32 border-4 border-dashed hover:bg-gray-100 hover:border-gray-300">
<div class="flex flex-col items-center justify-center pt-7">
<svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12 text-gray-400 group-hover:text-gray-600" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd" />
</svg>
<p class="pt-1 text-sm tracking-wider text-gray-400 group-hover:text-gray-600">
Select a photo
</p>
</div>
<!-- <form id="form" enctype="multipart/form-data"> -->
<input type="file" class="opacity-0" id="file" multiple />
</label>
</div>
</div>
<div class="flex p-2 space-x-4">
<button class="px-4 py-2 text-white bg-indigo-500 rounded shadow-xl">
Cannel
</button>
<button class="px-4 py-2 text-white bg-indigo-500 rounded shadow-xl">
Create
</button>
</div>
</div>
</div>
<!-- component -->
<div class="bg-[#F3FCFC] h-screen w-screen sm:px-8 md:px-16 sm:py-8">
<main class="container mx-auto max-w-screen-lg h-full">
<!-- file upload modal -->
<article aria-label="File Upload Modal" class="relative h-full flex flex-col bg-white shadow-xl rounded-md" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);" ondragleave="dragLeaveHandler(event);" ondragenter="dragEnterHandler(event);">
<!-- overlay -->
<div id="overlay" class="w-full h-full absolute top-0 left-0 pointer-events-none z-50 flex flex-col items-center justify-center rounded-md">
<i>
<svg class="fill-current w-12 h-12 mb-3 text-blue-700" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M19.479 10.092c-.212-3.951-3.473-7.092-7.479-7.092-4.005 0-7.267 3.141-7.479 7.092-2.57.463-4.521 2.706-4.521 5.408 0 3.037 2.463 5.5 5.5 5.5h13c3.037 0 5.5-2.463 5.5-5.5 0-2.702-1.951-4.945-4.521-5.408zm-7.479-1.092l4 4h-3v4h-2v-4h-3l4-4z" />
</svg>
</i>
<p class="text-lg text-blue-700">Drop files to upload</p>
</div>
<!-- scroll area -->
<section class="h-full overflow-auto p-8 w-full h-full flex flex-col">
<header class="border-dashed border-2 border-gray-400 py-12 flex flex-col justify-center items-center">
<p class="mb-3 font-semibold text-gray-900 flex flex-wrap justify-center">
<span>Drag and drop your</span> <span>files anywhere or</span>
</p>
<input id="hidden-input" type="file" multiple class="hidden" />
<button id="button" class="mt-2 rounded-sm px-3 py-1 bg-gray-200 hover:bg-gray-300 focus:shadow-outline focus:outline-none">
Upload a file
</button>
</header>
<h1 class="pt-8 pb-3 font-semibold sm:text-lg text-gray-900">
To Upload
</h1>
<ul id="gallery" class="flex flex-1 flex-wrap -m-1">
<li id="empty" class="h-full w-full text-center flex flex-col items-center justify-center items-center">
<img class="mx-auto w-32" src="https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png" alt="no data" />
<span class="text-small text-gray-500">No files selected</span>
</li>
</ul>
</section>
<!-- sticky footer -->
<footer class="flex justify-end px-8 pb-8 pt-4">
<button id="submit" type="submit" class="relative inline-flex items-center justify-center p-0.5 mb-2 mx-3 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800">
<span class="inline-flex relative px-5 py-2.5 transition-all ease-in duration-75 bg-[#F3FCFC] text-black rounded-md group-hover:bg-opacity-0 hover:text-white">
Upload now
</span>
</button>
<button id="cancel" class="relative inline-flex items-center justify-center p-0.5 mb-2 mx-3 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800">
<span class="inline-flex relative px-5 py-2.5 transition-all ease-in duration-75 bg-[#F3FCFC] text-black rounded-md group-hover:bg-opacity-0 hover:text-white">
Cancel
</span>
</button>
</footer>
</article>
</main>
</div>
<!-- </form> -->
<!-- using two similar templates for simplicity in js code -->
<template id="file-template">
<li class="block p-1 w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/6 xl:w-1/8 h-24">
<article tabindex="0" class="group w-full h-full rounded-md focus:outline-none focus:shadow-outline elative bg-gray-100 cursor-pointer relative shadow-sm">
<img alt="upload preview" class="img-preview hidden w-full h-full sticky object-cover rounded-md bg-fixed" />
<section class="flex flex-col rounded-md text-xs break-words w-full h-full z-20 absolute top-0 py-2 px-3">
<h1 class="flex-1 group-hover:text-blue-800"></h1>
<div class="flex">
<span class="p-1 text-blue-800">
<i>
<svg class="fill-current w-4 h-4 ml-auto pt-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M15 2v5h5v15h-16v-20h11zm1-2h-14v24h20v-18l-6-6z" />
</svg>
</i>
</span>
<p class="p-1 size text-xs text-gray-700"></p>
<button class="delete ml-auto focus:outline-none hover:bg-gray-300 p-1 rounded-md text-gray-800">
<svg class="pointer-events-none fill-current w-4 h-4 ml-auto" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path class="pointer-events-none" d="M3 6l3 18h12l3-18h-18zm19-4v2h-20v-2h5.711c.9 0 1.631-1.099 1.631-2h5.316c0 .901.73 2 1.631 2h5.711z" />
</svg>
</button>
</div>
</section>
</article>
</li>
</template>
<template id="image-template">
<li class="block p-1 w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/6 xl:w-1/8 h-24">
<article tabindex="0" class="group hasImage w-full h-full rounded-md focus:outline-none focus:shadow-outline bg-gray-100 cursor-pointer relative text-transparent hover:text-white shadow-sm">
<img alt="upload preview" class="img-preview w-full h-full sticky object-cover rounded-md bg-fixed" />
<section class="flex flex-col rounded-md text-xs break-words w-full h-full z-20 absolute top-0 py-2 px-3">
<h1 class="flex-1"></h1>
<div class="flex">
<span class="p-1">
<i>
<svg class="fill-current w-4 h-4 ml-auto pt-" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M5 8.5c0-.828.672-1.5 1.5-1.5s1.5.672 1.5 1.5c0 .829-.672 1.5-1.5 1.5s-1.5-.671-1.5-1.5zm9 .5l-2.519 4-2.481-1.96-4 5.96h14l-5-8zm8-4v14h-20v-14h20zm2-2h-24v18h24v-18z" />
</svg>
</i>
</span>
<p class="p-1 size text-xs"></p>
<button class="delete ml-auto focus:outline-none hover:bg-gray-300 p-1 rounded-md">
<svg class="pointer-events-none fill-current w-4 h-4 ml-auto" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path class="pointer-events-none" d="M3 6l3 18h12l3-18h-18zm19-4v2h-20v-2h5.711c.9 0 1.631-1.099 1.631-2h5.316c0 .901.73 2 1.631 2h5.711z" />
</svg>
</button>
</div>
</section>
</article>
</li>
</template>
<script src="../JS/jquery-3.6.0.min.js"></script>
<script src="../JS/index.js"></script>
<script>
const fileTempl = document.getElementById("file-template"),
imageTempl = document.getElementById("image-template"),
empty = document.getElementById("empty");
// use to store pre selected files
let FILES = {};
// check if file is of type image and prepend the initialied
// template to the target element
function addFile(target, file) {
const isImage = file.type.match("image.*"),
objectURL = URL.createObjectURL(file);
const clone = isImage ?
imageTempl.content.cloneNode(true) :
fileTempl.content.cloneNode(true);
clone.querySelector("h1").textContent = file.name;
clone.querySelector("li").id = objectURL;
clone.querySelector(".delete").dataset.target = objectURL;
clone.querySelector(".size").textContent =
file.size > 1024 ?
file.size > 1048576 ?
Math.round(file.size / 1048576) + "mb" :
Math.round(file.size / 1024) + "kb" :
file.size + "b";
isImage &&
Object.assign(clone.querySelector("img"), {
src: objectURL,
alt: file.name,
});
empty.classList.add("hidden");
target.prepend(clone);
FILES[objectURL] = file;
}
const gallery = document.getElementById("gallery"),
overlay = document.getElementById("overlay");
// click the hidden input of type file if the visible button is clicked
// and capture the selected files
const hidden = document.getElementById("hidden-input");
document.getElementById("button").onclick = () => hidden.click();
hidden.onchange = (e) => {
for (const file of e.target.files) {
addFile(gallery, file);
}
};
// use to check if a file is being dragged
const hasFiles = ({
dataTransfer: {
types = []
}
}) =>
types.indexOf("Files") > -1;
// use to drag dragenter and dragleave events.
// this is to know if the outermost parent is dragged over
// without issues due to drag events on its children
let counter = 0;
// reset counter and append file to gallery when file is dropped
function dropHandler(ev) {
ev.preventDefault();
for (const file of ev.dataTransfer.files) {
addFile(gallery, file);
overlay.classList.remove("draggedover");
counter = 0;
}
}
// only react to actual files being dragged
function dragEnterHandler(e) {
e.preventDefault();
if (!hasFiles(e)) {
return;
}
++counter && overlay.classList.add("draggedover");
}
function dragLeaveHandler(e) {
1 > --counter && overlay.classList.remove("draggedover");
}
function dragOverHandler(e) {
if (hasFiles(e)) {
e.preventDefault();
}
}
// event delegation to caputre delete events
// fron the waste buckets in the file preview cards
gallery.onclick = ({
target
}) => {
if (target.classList.contains("delete")) {
const ou = target.dataset.target;
document.getElementById(ou).remove(ou);
gallery.children.length === 1 && empty.classList.remove("hidden");
delete FILES[ou];
}
};
document.getElementById("cancel").onclick = () => {
while (gallery.children.length > 0) {
gallery.lastChild.remove();
}
FILES = {};
empty.classList.remove("hidden");
gallery.append(empty);
};
$('#submit').on('click', function(e) {
e.preventDefault();
let form_data = new FormData();
let no = $("li").length - 1;
for (i = 0; i < no; i++) {
form_data.append('file', FILES[Object.keys(FILES)[i]]);
$.ajax({
method: 'POST',
url: 'http://localhost/drive/frontend/assets/includes/upload_file.php',
processData: false,
contentType: false,
data: form_data,
success: (response) => {
open("./dashboard.php", "_self");
}
});
}
});
</script>
</body>
</html>
这是我的 file_upoloding 过程的后端代码
2.upload_file.php
<?php
include("./init.php");
include(pathOf('backend/queries/Connection.php'));
$uname = $_SESSION["user"];
$query = "SELECT `id` FROM `users` WHERE `username` = '$uname'";
$r = mysqli_query($connect, $query);
$row = mysqli_fetch_assoc($r);
$uid = $row["id"];
echo $uid;
$test = explode('.', $_FILES['file']['name']);
$extension = end($test);
$name = $_FILES['file']['name'];
if (!file_exists('../../../usersdata/users-stored-data/' . $uid)) {
mkdir('../../../usersdata/users-stored-data/' . $uid, 0777, true);
}
$location = '../../../usersdata/users-stored-data/' . $uid . '/' . $name;
move_uploaded_file($_FILES['file']['tmp_name'], $location);
echo "success";
?>
是的，这个 fileUploading 运行良好，所以如果有人可以帮助我，请在这里发表评论。