前言
这里给出一个基于django 的html二维码页面生成功能 页面，具有文件上传和订单提交两个功能，使用javascript来代理实现交互功能（包含无限扩展内容框生成功能）。
注意：这只是前端html代码和css代码，没有包含后端数据处理
代码
qrcode_create.html
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义二维码-产品详情上传</title>
<link rel="stylesheet" href="/static/css/create_qrcode.css">
</head>
<body>
<h2>产品详情</h2>
<form id="uploadForm" enctype="multipart/form-data" method="post" action="">
<input name="code" value="{{ code }}" hidden/>
<div>
<label for="page_title">页面标题:</label>
<input type="text" id="page_title" name="page_title" placeholder="输入标题" maxlength="64">
</div>
<div>
<label for="head_title">首行展示标题:</label>
<input type="text" id="head_title" name="head_title" placeholder="输入标题" maxlength="64">
</div>
<div>
<label for="target_name">目标名称:</label>
<input type="text" id="target_name" name="target_name" placeholder="输入标题" maxlength="64">
</div>
<div>
<label for="head_imgs_check">轮询图片:</label>
<input type="file" id="head_imgs_check" name="file" onchange="uploadFile('head_imgs_check', 'head_imgs')">
<input type="file" id="head_imgs_check1" name="file" onchange="uploadFile('head_imgs_check1', 'head_imgs')">
<input type="file" id="head_imgs_check2" name="file" onchange="uploadFile('head_imgs_check2', 'head_imgs')">
</div>
<div>
<label for="content">最后的按钮内容:</label>
<textarea id="final_button_text" name="final_button_text" placeholder="输入内容" maxlength="16"></textarea>
</div>
<div>
<label for="fileInput">最后的按钮跳转链接:</label>
<textarea id="final_button_url" name="final_button_url" placeholder="输入链接地址"></textarea>
</div>
<div id="more_checks"></div>
<button type="button" onclick="addMoreFields()">增加更多字段</button>
<button type="submit">生成页面二维码</button>
</form>
</body>
<script>
// 定义一个全局变量
var add_num = 0;
function uploadFile(old_id, id) {
var fileInput = document.getElementById('fileInput'); // 假设你的文件输入框的 id 是 'fileInput'
var files = fileInput.files;
if (files.length === 0) {
alert("请选择文件");
return;
}
if (files.length > 10) {
alert("文件数量超限");
return;
}
// 检查每个文件的大小
for (let i = 0; i < files.length; i++) {
if (files[i].size > 10 * 1024 * 1024) { // 10MB
alert(`文件 "${files[i].name}" 超过了 10MB 的大小限制。\n`);
return;
}
}
var formData = new FormData();
// 遍历所有选中的文件
for (var i = 0; i < files.length; i++) {
formData.append('files[]', files[i]); // 使用 'files[]' 作为字段名以处理多个文件
}
// 可以根据需要添加其他字段
formData.append('code', '{{ code }}');
fetch('/file/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.status === true) {
document.getElementById(old_id).insertAdjacentHTML('beforeend', `<input type="hidden" name=${id} value="[img]${data.data}">`);
alert("文件上传成功");
// 文件上传成功后，将输入框类型改为只读文本框
var input = document.getElementById(old_id);
input.setAttribute('type', 'text');
input.setAttribute('value', '[img]' + data.data);
input.setAttribute('readonly', 'readonly');
} else {
alert("文件上传失败: " + data.msg);
}
})
.catch(error => {
console.error('文件上传失败:', error);
alert("文件上传失败，请重试");
});
}
function addMoreFields() {
// 每次执行时增加 add_num 的值
add_num++;
console.log(add_num)
var additionalFields = `
<div>
<label for="contentType">内容类型：</label>
<input type="radio" id="paragraphOption_${add_num}" name="contentType_${add_num}" value="paragraph" onclick="showContent('paragraph', ${add_num})">段落
<input type="radio" id="imageOption_${add_num}" name="contentType_${add_num}" value="image" onclick="showContent('image', ${add_num})">图片
</div>
<div id="paragraphContent_${add_num}" style="display: none;">
<label for="additionalContent">段落:</label>
<textarea id="additionalContent" name="additionalContent" maxlength="255"></textarea>
</div>
<div id="imageContent_${add_num}" style="display: none;">
<label for="additionalFileInput">图片:</label>
<input type="file" id="additionalFileInput_${add_num}_check" onchange="uploadFile('additionalFileInput_${add_num}_check', 'additionalContent')">
</div>
`;
document.getElementById('more_checks').insertAdjacentHTML('beforeend', additionalFields);
}
function showContent(contentType, check_num) {
console.log(contentType, check_num)
var paragraphContent = document.getElementById("paragraphContent_" + check_num);
var imageContent = document.getElementById("imageContent_" + check_num);
if (contentType === 'paragraph') {
paragraphContent.style.display = "block";
imageContent.style.display = "none";
} else if (contentType === 'image') {
paragraphContent.style.display = "none";
imageContent.style.display = "block";
}
}
</script>
</html>create_qrcode.css
css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
h2 {
color: #333;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
div {
margin-bottom: 10px;
}
label {
font-weight: bold;
margin-bottom: 5px;
display: block;
}
input[type="text"],
textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
input[type="file"] {
width: 100%;
margin-top: 5px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
.additional-fields {
display: none;
}