update
This commit is contained in:
File diff suppressed because one or more lines are too long
+116
-4
@@ -12,6 +12,7 @@ init();
|
|||||||
<!-- <link rel="shortcut icon" href="/favicon.ico" /> -->
|
<!-- <link rel="shortcut icon" href="/favicon.ico" /> -->
|
||||||
<title><?php echo get_page_title(); ?></title>
|
<title><?php echo get_page_title(); ?></title>
|
||||||
<link rel="stylesheet" href="/css/style.css">
|
<link rel="stylesheet" href="/css/style.css">
|
||||||
|
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="" style="background-color: #fafaf9;">
|
<body class="" style="background-color: #fafaf9;">
|
||||||
@@ -46,9 +47,9 @@ init();
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
||||||
@@ -59,12 +60,123 @@ function show_index()
|
|||||||
{
|
{
|
||||||
ob_start(); ?>
|
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="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="">
|
<div class="">
|
||||||
<p class="text-2xl">
|
<table class="table-fixed border-collapse border border-green-800">
|
||||||
this is about
|
<thead>
|
||||||
</p>
|
<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>
|
||||||
|
</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
|
<?php
|
||||||
$html = ob_get_contents();
|
$html = ob_get_contents();
|
||||||
|
|||||||
Reference in New Issue
Block a user