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-15 10:54:25 +08:00
parent 40e69bc5e3
commit 3e66714475
Signed by: chenx221
GPG Key ID: D7A9EC07024C3021
3 changed files with 66 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
views/home/index.php
View File

@ -191,7 +191,7 @@ Modal::begin([
$model1 = new NewFolderForm();
$form = ActiveForm::begin(['id' => 'new-folder-form', 'action' => ['home/newfolder'], 'method' => 'post', 'enableAjaxValidation' => true]);
echo $form->field($model1, 'folderName')->textInput(['maxlength' => true])->label('文件夹名称 (受技术所限，暂时没什么办法通过js验证文件夹是否已存在以在client side显示)');
echo $form->field($model1, 'folderName')->textInput(['maxlength' => true])->label('文件夹名称');
echo Html::hiddenInput('relativePath', '', ['id' => 'newDirRelativePath']);
echo Html::submitButton('提交', ['class' => 'btn btn-primary']);

2
web/css/home_style.css
View File

@ -59,7 +59,7 @@ table a {
}
#drop-area.dragging::after {
content: "⇧\A拖拽文件到这里";
content: "⇧\A拖拽文件到这里\A(不支持拖拽文件夹上传)";
white-space: pre;
position: absolute;
top: 50%;

150
web/js/home_script.js
View File

@ -22,104 +22,22 @@ $(document).on('click', '.file-upload-btn', function () {
$('#file-input').click();
});
$('#file-input').on('change', function () {
$('#progress-bar').show();
var files = this.files;
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append('files[]', files[i]);
}
formData.append('targetDir', $('#target-dir').val());
formData.append('_csrf', $('meta[name="csrf-token"]').attr('content'));
var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function (event) {
if (event.lengthComputable) {
var percentComplete = event.loaded / event.total * 100;
$('#progress-bar .progress-bar').css('width', percentComplete + '%').text(Math.round(percentComplete) + '%');
}
};
xhr.onload = function () {
if (xhr.status !== 200) {
alert('An error occurred during the upload.');
}
window.location.reload();
};
xhr.open('POST', 'index.php?r=home%2Fupload');
xhr.send(formData);
uploadFiles(this.files);
});
$(document).on('click', '.folder-upload-btn', function () {
// 触发文件输入元素的点击事件
$('#folder-input').click();
});
$('#folder-input').on('change', function () {
$('#progress-bar').show();
var files = this.files;
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append('files[]', files[i]);
}
formData.append('targetDir', $('#target-dir').val());
formData.append('_csrf', $('meta[name="csrf-token"]').attr('content'));
var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function (event) {
if (event.lengthComputable) {
var percentComplete = event.loaded / event.total * 100;
$('#progress-bar .progress-bar').css('width', percentComplete + '%').text(Math.round(percentComplete) + '%');
}
};
xhr.onload = function () {
if (xhr.status !== 200) {
alert('An error occurred during the upload.');
}
window.location.reload();
};
xhr.open('POST', 'index.php?r=home%2Fupload');
xhr.send(formData);
uploadFiles(this.files);
});
$(document).on('click', '.offline-download-btn', function () {
console.log('你点击了离线下载，但功能尚未实现');
});
var dropArea = document.getElementById('drop-area');
dropArea.addEventListener('dragover', function (event) {
// 阻止浏览器的默认行为
event.preventDefault();
});
dropArea.addEventListener('drop', function (event) {
// 阻止浏览器的默认行为
event.preventDefault();
// 获取用户拖拽的文件或文件夹
var items = event.dataTransfer.items;
// 遍历项目
for (var i = 0; i < items.length; i++) {
var item = items[i];
uploadFile(item.getAsFile());
dropArea.classList.remove('dragging');
}
});
dropArea.addEventListener('dragenter', function (event) {
// 阻止浏览器的默认行为
event.preventDefault();
// 添加 dragging 类
dropArea.classList.add('dragging');
});
dropArea.addEventListener('dragleave', function (event) {
// 阻止浏览器的默认行为
event.preventDefault();
// 如果相关目标是拖拽区域或其子元素，那么就不移除 dragging 类
if (!dropArea.contains(event.relatedTarget)) {
// 移除 dragging 类
dropArea.classList.remove('dragging');
}
});
$(document).on('click', '.refresh-btn', function () {
window.location.reload();
});
@ -128,4 +46,64 @@ $(document).on('click', '.new-folder-btn', function () {
var relativePath = $(this).attr('value');
$('#newDirRelativePath').val(relativePath);
$('#newFolderModal').modal('show');
})
})
//上传
function uploadFiles(files) {
$('#progress-bar').show();
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append('files[]', files[i]);
}
formData.append('targetDir', $('#target-dir').val());
formData.append('_csrf', $('meta[name="csrf-token"]').attr('content'));
var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function (event) {
if (event.lengthComputable) {
var percentComplete = event.loaded / event.total * 100;
$('#progress-bar .progress-bar').css('width', percentComplete + '%').text(Math.round(percentComplete) + '%');
}
};
xhr.onload = function () {
if (xhr.status !== 200) {
alert('An error occurred during the upload.');
}
window.location.reload();
};
xhr.open('POST', 'index.php?r=home%2Fupload');
xhr.send(formData);
}
//拖拽上传
var dropArea = document.getElementById('drop-area');
dropArea.addEventListener('dragover', function (event) {
event.preventDefault();
});
dropArea.addEventListener('drop', function (event) {
event.preventDefault();
var items = event.dataTransfer.items;
var files = [];
for (var i = 0; i < items.length; i++) {
var item = items[i];
files.push(item.getAsFile());
}
uploadFiles(files);
dropArea.classList.remove('dragging');
});
dropArea.addEventListener('dragenter', function (event) {
event.preventDefault();
dropArea.classList.add('dragging');
});
dropArea.addEventListener('dragleave', function (event) {
event.preventDefault();
if (!dropArea.contains(event.relatedTarget)) {
dropArea.classList.remove('dragging');
}
});