前言
这里给出一个基于django的html二维码页面生成功能页面，具有文件上传和订单提交两个功能，使用javascript来代理实现交互功能（包含无限扩展内容框生成功能）。
注意：这只是前端html代码和css代码，没有包含后端数据处理
代码
qrcode_create.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) { // 10MBalert(`文件 "${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
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;
}