quant-speed-AI/market_page
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

audo url
All checks were successful
Deploy to Server / deploy (push) Successful in 16s
Details

Browse Source
This commit is contained in:
jeremygan2021
2026-03-17 23:48:08 +08:00
parent bd102cc71f
commit 465ea34dcd
3 changed files with 188 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
backend/competition/templates/judge/dashboard.html
View File

@@ -204,6 +204,21 @@
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">选择上传方式</label>
<div class="flex space-x-4 mb-3">
<label class="inline-flex items-center">
<input type="radio" name="uploadType" value="file" checked class="form-radio text-blue-600" onchange="toggleUploadType()">
<span class="ml-2 text-sm text-gray-700">文件上传</span>
</label>
<label class="inline-flex items-center">
<input type="radio" name="uploadType" value="url" class="form-radio text-blue-600" onchange="toggleUploadType()">
<span class="ml-2 text-sm text-gray-700">URL 上传</span>
</label>
</div>
</div>
<!-- 文件上传 -->
<div id="fileUploadSection">
<label class="block text-sm font-medium text-gray-700 mb-1">选择文件 (支持mp3/mp4, &le;50MB)</label>
<div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md hover:border-blue-400 transition-colors cursor-pointer" onclick="document.getElementById('fileInput').click()">
<div class="space-y-1 text-center">
@@ -211,7 +226,7 @@
<div class="flex text-sm text-gray-600">
<label for="fileInput" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
<span>点击上传</span>
<input id="fileInput" name="fileInput" type="file" class="sr-only" multiple accept=".mp3,.mp4" required onchange="updateFileName(this)">
<input id="fileInput" name="fileInput" type="file" class="sr-only" multiple accept="audio/mpeg,audio/mp4,audio/*,.mp3,.mp4" onchange="updateFileName(this)">
</label>
<p class="pl-1">或拖拽文件到这里</p>
</div>
@@ -221,6 +236,13 @@
</div>
</div>
<!-- URL 上传 -->
<div id="urlUploadSection" style="display: none;">
<label class="block text-sm font-medium text-gray-700 mb-1">音频 URL 地址</label>
<input type="url" id="audioUrlInput" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md p-3" placeholder="https://example.com/audio.mp3">
<p class="text-xs text-gray-500 mt-1">支持 MP3、MP4 等音频/视频格式的直链</p>
</div>
<div id="uploadProgressContainer" style="display: none;" class="bg-gray-50 p-3 rounded-md">
<div class="flex justify-between text-xs text-gray-600 mb-1">
<span id="uploadStatusText">准备上传...</span>
@@ -304,6 +326,30 @@ function updateFileName(input) {
}
}
/**
* 切换文件上传和URL上传的显示
* 根据用户选择显示对应的输入区域
*/
function toggleUploadType() {
const uploadType = document.querySelector('input[name="uploadType"]:checked').value;
const fileUploadSection = document.getElementById('fileUploadSection');
const urlUploadSection = document.getElementById('urlUploadSection');
const fileInput = document.getElementById('fileInput');
const urlInput = document.getElementById('audioUrlInput');
if (uploadType === 'file') {
fileUploadSection.style.display = 'block';
urlUploadSection.style.display = 'none';
fileInput.required = true;
urlInput.required = false;
} else {
fileUploadSection.style.display = 'none';
urlUploadSection.style.display = 'block';
fileInput.required = false;
urlInput.required = true;
}
}
function closeModal(id) {
const modal = document.getElementById(id);
modal.classList.remove('active');
@@ -602,10 +648,10 @@ async function uploadFiles(e) {
e.preventDefault();
const projectSelect = document.getElementById('uploadProjectSelect');
const fileInput = document.getElementById('fileInput');
const audioUrlInput = document.getElementById('audioUrlInput');
const projectId = projectSelect.value;
const files = fileInput.files;
if (files.length === 0) return;
const uploadType = document.querySelector('input[name="uploadType"]:checked').value;
const progressBar = document.getElementById('uploadProgressBar');
const statusText = document.getElementById('uploadStatusText');
@@ -614,6 +660,57 @@ async function uploadFiles(e) {
container.style.display = 'block';
if (uploadType === 'url') {
// URL 上传模式
const audioUrl = audioUrlInput.value.trim();
if (!audioUrl) {
alert('请输入音频 URL');
container.style.display = 'none';
return;
}
statusText.innerText = '正在处理 URL...';
progressBar.style.width = '30%';
percentText.innerText = '30%';
try {
const res = await fetch('/judge/api/upload/url/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': '{{ csrf_token }}'
},
body: JSON.stringify({
url: audioUrl,
project_id: projectId
})
});
const result = await res.json();
if (result.success) {
progressBar.style.width = '100%';
percentText.innerText = '100%';
statusText.innerText = '上传成功!';
setTimeout(() => {
closeModal('uploadModal');
container.style.display = 'none';
window.location.href = "{% url 'judge_ai_manage' %}";
}, 1000);
} else {
alert('上传失败: ' + result.message);
container.style.display = 'none';
}
} catch (err) {
alert('上传出错: ' + err);
container.style.display = 'none';
}
return;
}
// 文件上传模式 (原有用 XMLHttpRequest)
if (files.length === 0) return;
for (let i = 0; i < files.length; i++) {
const file = files[i];
if (file.size > 50 * 1024 * 1024) {