小贝子编程

脚本不是通过$.ajax/PHP调用的



我创建了一个php文件系统，其中包含创建文件夹、更新、上传文件和删除文件。除了上传文件外，一切都很好。当单击上传按钮时，它会打开上传文件表单，但在提交时不会调用upload.php脚本。我想不出原因。

这是整个代码

index.php

<!DOCTYPE html>
<html>
<head>
<title>PHP Filesystem with Ajax JQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<h2 align="center">PHP Filesystem with Ajax JQuery</a></h2>
<br />
<div align="right">
<button type="button" name="create_folder" id="create_folder" class="btn btn-success">Create</button>
</div>
<br />
<div class="table-responsive" id="folder_table">
</div>
</div>
</body>
</html>
<div id="folderModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title"><span id="change_title">Create Folder</span></h4>
</div>
<div class="modal-body">
<p>Enter Folder Name
<input type="text" name="folder_name" id="folder_name" class="form-control" /></p>
<br />
<input type="hidden" name="action" id="action" />
<input type="hidden" name="old_name" id="old_name" />
<input type="button" name="folder_button" id="folder_button" class="btn btn-info" value="Create" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="uploadModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Upload File</h4>
</div>
<div class="modal-body">
<form method="post" id="upload_form" enctype='multipart/form-data'>
<p>Select Image
<input type="file" name="upload_file[]" multiple /></p>
<br />
<input type="hidden" name="hidden_folder_name" id="hidden_folder_name" />
<input type="submit" name="upload_button" class="btn btn-info" value="Upload" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="filelistModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">File List</h4>
</div>
<div class="modal-body" id="file_list">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
load_folder_list();
function load_folder_list() {
var action = "fetch";
$.ajax({
url: "action.php",
method: "POST",
data: {
action: action
},
success: function(data) {
$('#folder_table').html(data);
}
});
}
$(document).on('click', '#create_folder', function() {
$('#action').val("create");
$('#folder_name').val('');
$('#folder_button').val('Create');
$('#folderModal').modal('show');
$('#old_name').val('');
$('#change_title').text("Create Folder");
});
$(document).on('click', '#folder_button', function() {
var folder_name = $('#folder_name').val();
var old_name = $('#old_name').val();
var action = $('#action').val();
if (folder_name != '') {
$.ajax({
url: "action.php",
method: "POST",
data: {
folder_name: folder_name,
old_name: old_name,
action: action
},
success: function(data) {
$('#folderModal').modal('hide');
load_folder_list();
alert(data);
}
});
} else {
alert("Enter Folder Name");
}
});
$(document).on("click", ".update", function() {
var folder_name = $(this).data("name");
$('#old_name').val(folder_name);
$('#folder_name').val(folder_name);
$('#action').val("change");
$('#folderModal').modal("show");
$('#folder_button').val('Update');
$('#change_title').text("Change Folder Name");
});
$(document).on("click", ".delete", function() {
var folder_name = $(this).data("name");
var action = "delete";
if (confirm("Are you sure you want to remove it?")) {
$.ajax({
url: "action.php",
method: "POST",
data: {
folder_name: folder_name,
action: action
},
success: function(data) {
load_folder_list();
alert(data);
}
});
}
});
$(document).on('click', '.upload', function() {
var folder_name = $(this).data("name");
$('#hidden_folder_name').val(folder_name);
$('#uploadModal').modal('show');
});
$('#upload_form').on('submit', function() {
$.ajax({
url: "upload.php",
method: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
success: function(data) {
load_folder_list();
alert(data);
},

});
});
$(document).on('click', '.view_files', function() {
var folder_name = $(this).data("name");
var action = "fetch_files";
$.ajax({
url: "action.php",
method: "POST",
data: {
action: action,
folder_name: folder_name
},
success: function(data) {
$('#file_list').html(data);
$('#filelistModal').modal('show');
}
});
});
$(document).on('click', '.remove_file', function() {
var path = $(this).attr("id");
var action = "remove_file";
if (confirm("Are you sure you want to remove this file?")) {
$.ajax({
url: "action.php",
method: "POST",
data: {
path: path,
action: action
},
success: function(data) {
alert(data);
$('#filelistModal').modal('hide');
load_folder_list();
}
});
}
});
$(document).on('blur', '.change_file_name', function() {
var folder_name = $(this).data("folder_name");
var old_file_name = $(this).data("file_name");
var new_file_name = $(this).text();
var action = "change_file_name";
$.ajax({
url: "action.php",
method: "POST",
data: {
folder_name: folder_name,
old_file_name: old_file_name,
new_file_name: new_file_name,
action: action
},
success: function(data) {
alert(data);
}
});
});
});
</script>

upload.php

<?php
if($_FILES["upload_file"]["name"] != '')
{
$data = explode(".", $_FILES["upload_file"]["name"]);
$extension = $data[1];
$allowed_extension = array('jpg', 'png', 'jpeg', 'gif');
if(in_array($extension, $allowed_extension)){
$new_file_name = rand() . '.' . $extension;
$path = $_POST["hidden_folder_name"] . '/' . $new_file_name;
if(move_uploaded_file($_FILES["upload_file"]["tmp_name"], $path)){
echo 'Image Uploaded';
}
else
{
echo 'There is some error';
}
}else{
echo 'Invalid Image File';
}
}else{
echo 'Please Select Image';
}
?>

action.php

<?php
function format_folder_size($size)
{
if ($size >= 1073741824) {
$size = number_format($size / 1073741824, 2) . ' GB';
} elseif ($size >= 1048576) {
$size = number_format($size / 1048576, 2) . ' MB';
} elseif ($size >= 1024) {
$size = number_format($size / 1024, 2) . ' KB';
} elseif ($size > 1) {
$size = $size . ' bytes';
} elseif ($size == 1) {
$size = $size . ' byte';
} else {
$size = '0 bytes';
}
return $size;
}
function get_folder_size($folder_name)
{
$total_size = 0;
$file_data = scandir($folder_name);
foreach ($file_data as $file) {
if ($file === '.' or $file === '..') {
continue;
} else {
$path = $folder_name . '/' . $file;
$total_size = $total_size + filesize($path);
}
}
return format_folder_size($total_size);
}
if (isset($_POST["action"])) {
if ($_POST["action"] == "fetch") {
$folder = array_filter(glob('*'), 'is_dir');
$output = '
<table class="table table-bordered table-striped">
<tr>
<th>Folder Name</th>
<th>Total File</th>
<th>Size</th>
<th>Update</th>
<th>Delete</th>
<th>Upload File</th>
<th>View Uploaded File</th>
</tr>
';
if (count($folder) > 0) {
foreach ($folder as $name) {
$output .= '
<tr>
<td>' . $name . '</td>
<td>' . (count(scandir($name)) - 2) . '</td>
<td>' . get_folder_size($name) . '</td>
<td><button type="button" name="update" data-name="' . $name . '" class="update btn btn-warning btn-xs">Update</button></td>
<td><button type="button" name="delete" data-name="' . $name . '" class="delete btn btn-danger btn-xs">Delete</button></td>
<td><button type="button" name="upload" data-name="' . $name . '" class="upload btn btn-info btn-xs">Upload File</button></td>
<td><button type="button" name="view_files" data-name="' . $name . '" class="view_files btn btn-default btn-xs">View Files</button></td>
</tr>';
}
} else {
$output .= '
<tr>
<td colspan="6">No Folder Found</td>
</tr>
';
}
$output .= '</table>';
echo $output;
}
if ($_POST["action"] == "create") {
if (!file_exists($_POST["folder_name"])) {
mkdir($_POST["folder_name"], 0777, true);
echo 'Folder Created';
} else {
echo 'Folder Already Created';
}
}
if ($_POST["action"] == "change") {
if (!file_exists($_POST["folder_name"])) {
rename($_POST["old_name"], $_POST["folder_name"]);
echo 'Folder Name Change';
} else {
echo 'Folder Already Created';
}
}
if ($_POST["action"] == "delete") {
$files = scandir($_POST["folder_name"]);
foreach ($files as $file) {
if ($file === '.' or $file === '..') {
continue;
} else {
unlink($_POST["folder_name"] . '/' . $file);
}
}
if (rmdir($_POST["folder_name"])) {
echo 'Folder Deleted';
}
}
if ($_POST["action"] == "fetch_files") {
$file_data = scandir($_POST["folder_name"]);
$output = '
<table class="table table-bordered table-striped">
<tr>
<th>Image</th>
<th>File Name</th>
<th>Delete</th>
</tr>
';
foreach ($file_data as $file) {
if ($file === '.' or $file === '..') {
continue;
} else {
$path = $_POST["folder_name"] . '/' . $file;
$output .= '
<tr>
<td><img src="' . $path . '" class="img-thumbnail" height="50" width="50" /></td>
<td contenteditable="true" data-folder_name="' . $_POST["folder_name"] . '"  data-file_name = "' . $file . '" class="change_file_name">' . $file . '</td>
<td><button name="remove_file" class="remove_file btn btn-danger btn-xs" id="' . $path . '">Remove</button></td>
</tr>
';
}
}
$output .= '</table>';
echo $output;
}
if ($_POST["action"] == "remove_file") {
if (file_exists($_POST["path"])) {
unlink($_POST["path"]);
echo 'File Deleted';
}
}
if ($_POST["action"] == "change_file_name") {
$old_name = $_POST["folder_name"] . '/' . $_POST["old_file_name"];
$new_name = $_POST["folder_name"] . '/' . $_POST["new_file_name"];
if (rename($old_name, $new_name)) {
echo 'File name change successfully';
} else {
echo 'There is an error';
}
}
}
?>

当您单击modal中的upload按钮时，您需要在上载函数中使用preventDefault方法来确保站点不是reloading，并且ajax正在获取called。

将upload_form函数更改为：(测试了此代码，它可以工作(

$(document).on('click', '.upload', function(e) {
e.preventDefault() //use prevent default
var folder_name = $(this).data("name");
$('#hidden_folder_name').val(folder_name);
$('#uploadModal').modal('show');
});
$('#upload_form').on('submit', function(e) {
e.preventDefault() //use prevent default
//Ajax
$.ajax({
url: "upload.php",
method: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
success: function(data) {
load_folder_list();
alert(data);
},
});
});

Upload.php文件代码

您的upload.php文件中也存在一些问题。由于您使用多个文件上传并通过ajax以Array的形式发送数据，因此会出现错误。

因此，您还需要在PHP文件中使用foreach，以便将您发送的所有files都作为文件夹中的uploaded。

将您的upload.php代码替换为：(已测试且全部工作(

<?php
if($_FILES["upload_file"]["name"] != '') {
foreach ($_FILES["upload_file"]["name"] as $key => $file) { //use foreach
$data = explode(".", $file);
$extension = $data[1];
$allowed_extension = array('jpg', 'png', 'jpeg', 'gif');
if(in_array($extension, $allowed_extension)){
$new_file_name = rand() . '.' . $extension;
$path = $_POST["hidden_folder_name"] . '/' . $new_file_name;     
if(move_uploaded_file($_FILES["upload_file"]["tmp_name"][$key], $path)){ //use key for each file to be moved
echo 'Image Uploaded';
}
else {
echo 'There is some error';
}
}else{
echo 'Invalid Image File';
}
}
}else{
echo 'Please Select Image';
}
?>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium