chenx221/yii2-netdisk
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

实现文本预览和编辑保存功能

Browse Source
This commit is contained in:
Chenx221 2024-02-20 16:24:42 +08:00
parent 2ddd915cf2
commit a99f3cce85
Signed by: chenx221
GPG Key ID: D7A9EC07024C3021
3 changed files with 113 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
controllers/HomeController.php
View File

@ -330,15 +330,16 @@ class HomeController extends Controller
* 注意,已存在的同名文件会被覆盖
* https://devs.chenx221.cyou:8081/index.php?r=home%2Fupload
*
* @return int
* @return int|Response
*/
public function actionUpload(): int
public function actionUpload()
{
$model = new UploadForm();
$model->targetDir = Yii::$app->request->post('targetDir', '.');
$uploadedFiles = UploadedFile::getInstancesByName('files');
$successCount = 0;
$totalCount = count($uploadedFiles);
$sp = Yii::$app->request->post('sp', null);
foreach ($uploadedFiles as $uploadedFile) {
$model->uploadFile = $uploadedFile;
@ -349,16 +350,25 @@ class HomeController extends Controller
$successCount++;
}
}
if ($successCount === $totalCount) {
Yii::$app->session->setFlash('success', 'All files uploaded successfully.');
} elseif ($successCount > 0) {
Yii::$app->session->setFlash('warning', 'Some files uploaded successfully.');
} else {
Yii::$app->session->setFlash('error', 'Failed to upload files.');
if ($sp === 'editSaving') {
if ($successCount === $totalCount) {
Yii::$app->response->statusCode = 200;
return $this->asJson(['status' => 200, 'message' => 'All files uploaded successfully.']);
} else{
Yii::$app->response->statusCode = 500;
return $this->asJson(['status' => 500, 'message' => 'Failed to upload files.']);
}
}else {
if ($successCount === $totalCount) {
Yii::$app->session->setFlash('success', 'All files uploaded successfully.');
} elseif ($successCount > 0) {
Yii::$app->session->setFlash('warning', 'Some files uploaded successfully.');
} else {
Yii::$app->session->setFlash('error', 'Failed to upload files.');
}
//返回状态码200
return Yii::$app->response->statusCode = 200; // 如果出错请删掉return}
}
//返回状态码200
return Yii::$app->response->statusCode = 200; // 如果出错请删掉return
}
/**

17
views/home/index.php
View File

@ -6,6 +6,7 @@
/* @var $directory string 当前路径 */
use app\assets\AceAsset;
use app\assets\PlyrAsset;
use app\assets\ViewerJsAsset;
use app\models\NewFolderForm;
@ -28,6 +29,7 @@ FontAwesomeAsset::register($this);
JqueryAsset::register($this);
ViewerJsAsset::register($this);
PlyrAsset::register($this);
AceAsset::register($this);
$this->registerCssFile('@web/css/home_style.css');
?>
<div class="home-directory">
@ -150,6 +152,8 @@ $this->registerCssFile('@web/css/home_style.css');
<?= Html::a($item['name'], ['home/preview', 'relativePath' => $relativePath], ['class' => 'file_name', 'onclick' => 'previewImage(this, event)']) ?>
<?php elseif ($item['type'] === 'fa-regular fa-file-video'): ?>
<?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath, 'type' => $item['rawType']], ['class' => 'file_name', 'onclick' => 'previewVideo(this, event)']) ?>
<?php elseif ($item['type'] === 'fa-regular fa-file-lines' || $item['type'] === 'fa-regular fa-file-code' || $item['type'] === 'fa-solid fa-gears'): ?>
<?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath, 'type' => $item['rawType']], ['class' => 'file_name', 'onclick' => 'textEdit(this, event)']) ?>
<?php elseif ($item['type'] === 'fa-regular fa-file-audio'): ?>
<?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath, 'type' => $item['rawType']], ['class' => 'file_name', 'onclick' => 'previewAudio(this, event)']) ?>
<?php else: ?>
@ -298,6 +302,19 @@ echo '<audio id="aPlayer" controls>
<source src="" type="">
</audio>';
Modal::end();
Modal::begin([
'title' => '<h4>文本编辑</h4>',
'id' => 'textEditModal',
'size' => 'modal-lg',
]);
echo'<div class="alert alert-success" role="alert" id="ed-alert-success">保存成功</div><div class="alert alert-danger" role="alert" id="ed-alert-fail">保存失败</div>';
echo '<button id="saveButton" class="btn btn-outline-primary" style="margin-bottom: 16px"><i class="fa-regular fa-floppy-disk"></i> 保存文件</button>';
echo '<input type="hidden" id="edFilename" value="">';
echo '<div id="editor" style="width: 100%; height: 500px;"></div>';
Modal::end();
$this->registerJsFile('@web/js/home_script.js', ['depends' => [JqueryAsset::class], 'position' => View::POS_END]);
?>

109
web/js/home_script.js
View File

@ -100,9 +100,9 @@ $(document).on('click', '.unzip-btn', function () {
$.ajax({
type: "POST",
url: "index.php?r=home%2Funzip",
data: { relativePath: relativePath },
data: {relativePath: relativePath},
dataType: "json", // 期望从服务器接收json格式的响应
success: function(response) {
success: function (response) {
// 如果服务器返回的状态码是200，说明解压成功
if (response.status === 200) {
// 刷新页面，加载到解压后的目录
@ -112,7 +112,7 @@ $(document).on('click', '.unzip-btn', function () {
window.location.href = 'index.php?r=home%2Findex&directory=' + encodeURIComponent(response.parentDirectory);
}
},
error: function() {
error: function () {
// 处理错误
console.error('AJAX request failed.');
}
@ -151,12 +151,12 @@ $(document).on('click', '.batch-paste-btn', function () {
$.ajax({
type: "POST",
url: "index.php?r=home%2Fpaste",
data: { operation: operation, relativePaths: relativePaths, targetDirectory: targetDirectory },
success: function() {
data: {operation: operation, relativePaths: relativePaths, targetDirectory: targetDirectory},
success: function () {
// 处理响应
location.reload();
},
error: function() {
error: function () {
// 处理错误
console.error('AJAX request failed.');
}
@ -172,16 +172,16 @@ $(document).on('click', '.calc-sum-btn', function () {
$.ajax({
type: "POST",
url: "index.php?r=home%2Fchecksum",
data: { relativePath: relativePath },
data: {relativePath: relativePath},
dataType: "json",
success: function(response) {
success: function (response) {
// 更新模态框中的内容
$('#crc32b').text('CRC32B: ' + response.crc32b);
$('#sha256').text('SHA256: ' + response.sha256);
// 显示模态框
$('#checksumModal').modal('show');
},
error: function() {
error: function () {
console.error('AJAX request failed.');
}
});
@ -197,26 +197,6 @@ $(document).on('click', '#generate_access_code', function () {
$('#shareModal #share-access_code').val(accessCode);
});
// $(document).on('submit', '#share-form', function (event) {
// event.preventDefault();
//
// var relativePath = $('#shareModal #share-file_relative_path').val();
// var accessCode = $('#shareModal #share-access_code').val();
//
// $.ajax({
// type: "POST",
// url: "index.php?r=share%2Fcreate",
// data: { file_relative_path: relativePath, access_code: accessCode },
// success: function() {
// // 处理响应
// location.reload();
// },
// error: function() {
// // 处理错误
// console.error('AJAX request failed.');
// }
// });
// });
$(document).on('click', '.shares-btn', function () {
var relativePath = $(this).closest('tr').find('.select-item').data('relativePath');
$('#shareModal #share-file_relative_path').val(relativePath);
@ -230,12 +210,12 @@ $(document).on('click', '.batch-delete-btn', function () {
$.ajax({
type: "POST",
url: "index.php?r=home%2Fdelete",
data: { relativePath: relativePaths },
success: function() {
data: {relativePath: relativePaths},
success: function () {
// 处理响应
location.reload();
},
error: function() {
error: function () {
// 处理错误
console.error('AJAX request failed.');
location.reload();
@ -392,7 +372,7 @@ function updateButtons() {
// 当checkbox的状态改变时，调用updateButtons函数
$(document).on('change', '.select-item', updateButtons);
$(document).ready(function() {
$(document).ready(function () {
updateButtons();
});
@ -414,7 +394,7 @@ function previewImage(element, event) {
flipHorizontal: 1,
flipVertical: 1,
},
hidden: function() {
hidden: function () {
viewer.destroy();
}
});
@ -448,6 +428,7 @@ videoModal.on('hidden.bs.modal', function () {
//music preview
var aPlayer;
var audioModal = $('#audioModal');
function previewAudio(element, event) {
event.preventDefault();
var audioElement = document.getElementById('aPlayer');
@ -460,8 +441,68 @@ function previewAudio(element, event) {
// 显示模态框
audioModal.modal('show');
}
audioModal.on('hidden.bs.modal', function () {
if (aPlayer) {
aPlayer.destroy();
}
});
//text edit
var editor;
var editorModal = $('#textEditModal');
function textEdit(element, event) {
event.preventDefault();
editorModal.modal('show');
var fileUrl = element.href;
$('#edFilename').val(element.innerText);
$('#ed-alert-success').hide();
$('#ed-alert-fail').hide();
$.get(fileUrl, function (data) {
editor = ace.edit("editor");
editor.session.setOption("useWorker", false);
editor.setTheme("ace/theme/github");
editor.renderer.setOption("fontSize", 15);
editor.renderer.setOption("animatedScroll", true)
editor.session.setMode("ace/mode/text");
editor.setValue(data);
});
}
editorModal.on('hidden.bs.modal', function () {
if (editor) {
editor.destroy();
// editor.container.remove();
}
});
$('#saveButton').on('click', function () {
var content = editor.getValue();
var blob = new Blob([content], {type: "text/plain"});
var file = new File([blob], $('#edFilename').val(), {type: "text/plain"});
var formData = new FormData();
formData.append('files', file);
formData.append('sp', 'editSaving');
formData.append('targetDir', $('#target-dir').val());
$.ajax({
type: "POST",
url: "index.php?r=home%2Fupload", // 替换为你的上传URL
data: formData,
processData: false, // 告诉jQuery不要处理发送的数据
contentType: false, // 告诉jQuery不要设置Content-Type请求头
success: function (data) {
if (data.status === 200) {
$('#ed-alert-success').show();
$('#ed-alert-fail').hide();
} else {
$('#ed-alert-success').hide();
$('#ed-alert-fail').show();
}
},
error: function () {
$('#ed-alert-success').hide();
$('#ed-alert-fail').show();
}
});
});