update

2023-04-12 11:12:26 +08:00
parent 3bf2c6300a
commit fb6ae4600d
2 changed files with 118 additions and 6 deletions
@@ -12,6 +12,7 @@ init();
    <!-- <link rel="shortcut icon" href="/favicon.ico" /> -->
    <title><?php echo get_page_title(); ?></title>
    <link rel="stylesheet" href="/css/style.css">
+    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
 </head>

 <body class="" style="background-color: #fafaf9;">
@@ -46,9 +47,9 @@ init();
        </div>
    </div>

-
 </body>

+
 </html>


@@ -59,13 +60,124 @@ function show_index()
 {
    ob_start(); ?>

+    <form role="form" action="##" onsubmit="return false" method="post" enctype="multipart/form-data" id="uploadForm">
+        <input type="file" class="input-file" id="file" name="file" style="display: none" multiple="multiple" accept="image/png, image/jpeg, image/jpg, image/gif">
+    </form>

-    <div class="">
-        <p class="text-2xl">
-            this is about
-        </p>
+    <div class="grid grid-cols-1 w-full space-y-2">
+
+        <div class="text-2xl w-full">1.选择图片&上传</div>
+
+        <div class="flex  space-x-5">
+            <button class="h-10 w-20 bg-red-300" id="choosePic">选择图片</button>
+            <button class="h-10 w-20 bg-blue-300" id="submitBtn">开始上传</button>
+        </div>
+
+        <div class="text-2xl w-full">2.图片链接</div>
+
+        <div class="">
+            <table class="table-fixed border-collapse border border-green-800">
+                <thead>
+                    <tr class="border border-green-600">
+                        <th class="border border-green-600 w-100 text-center">名称</th>
+                        <th class="border border-green-600 w-30 text-center">大小</th>
+                        <th class="border border-green-600 w-30 text-center">状态</th>
+                        <th class="border border-green-600 w-200 text-center">链接</th>
+                    </tr>
+                </thead>
+                <tbody id="tbodyId">
+                </tbody>
+            </table>
+        </div>
    </div>

+    <script type="text/javascript">
+        const queue = [];
+
+        $('#choosePic').click(function() {
+            $("#file").click();
+        });
+
+        const fileInput = document.querySelector('#file')
+
+        const fileList = fileInput.files
+        file = fileList.item(0)
+
+        fileInput.addEventListener('change', function(e) {
+            for (var i = 0; i < this.files.length; i++) {
+                const file = this.files[i];
+
+                if (file.size > 5 * 1024 * 1024) {
+                    alert('文件大小不能超过5MB,已忽略。');
+                    continue;
+                }
+
+                const id = "picId_" + Math.random().toString(36).substr(2, 8);
+
+                const tpl = '<tr class="border border-green-600 text-center"><td class="border border-green-600 text-center">' + file.name + '</td><td class="border border-green-600 text-center">' + (file.size / 1024 / 1024).toFixed(2) + 'MB</td><td class="border border-green-600 text-center">等待上传</td><td id="' + id + '"></td></tr>';
+                $('#tbodyId').append(tpl);
+                data = {
+                    'id': id,
+                    'file': file
+                }
+                queue.push(data);
+            }
+        });
+
+        $("#submitBtn").click(function() {
+            if (queue.length == 0) {
+                alert('请选择图片');
+                return false;
+            }
+
+            for (var i = 0; i < queue.length; i++) {
+
+                var formData = new FormData();
+                formData.append('file', queue[i].file);
+                formData.append('id', queue[i].id);
+                $("#" + queue[i].id).prev().text('上传中');
+
+                // $.ajax({
+                //     url: '/api/upload', // POST请求的URL地址
+                //     type: 'POST', // 请求类型为POST
+                //     data: formData,
+                //     dataType: 'json', // 响应数据类型为JSON
+                //     processData: false, // 不处理表单数据
+                //     contentType: false, // 不设置请求头
+                //     success: function(response) { // 成功响应后的回调函数
+                //         console.log(response); // 输出响应数据
+                //     },
+                //     error: function(xhr, status, error) { // 响应出错时的回调函数
+                //         console.log(error); // 输出错误信息
+                //     }
+                // });
+                $.ajax({
+                    url: "/api/upload",
+                    type: 'POST',
+                    dataType: "json",
+                    data: formData,
+                    cache: false,
+                    processData: false,
+                    contentType: false,
+                    success: function(data) {
+                        if (data.code == 200) {
+                            $("#" + data.id).html(data.src);
+                            $("#" + data.id).prev().text('上传成功');
+                            // $("#textareaId").append(data.src + "\n");
+                        } else {
+                            $("#" + data.id).prev().text('上传失败');
+                            $(queue[i]['id']).html("上传失败");
+                        }
+                    },
+                    error: function(data) {
+                        alert('上传失败');
+                    }
+                });
+            }
+
+        });
+    </script>
+
 <?php
    $html = ob_get_contents();
    ob_clean();