实现文件拖拽上传

views/home/index.php

@@ -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']);
 

web/css/home_style.css

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

web/js/home_script.js

@@ -22,104 +22,22 @@ $(document).on('click', '.file-upload-btn', function () {
     $('#file-input').click();
 });
 $('#file-input').on('change', function () {
-    $('#progress-bar').show();
+    uploadFiles(this.files);
-    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);
 });
 
-
 $(document).on('click', '.folder-upload-btn', function () {
     // 触发文件输入元素的点击事件
     $('#folder-input').click();
 });
 
 $('#folder-input').on('change', function () {
-    $('#progress-bar').show();
+    uploadFiles(this.files);
-    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);
 });
+
 $(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();
 });
@@ -129,3 +47,63 @@ $(document).on('click', '.new-folder-btn', function () {
     $('#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');
+    }
+});