关于Html动态添加上传文件控件inputFile（附件）及清除已选择的文件的几个方法

### 实现发送邮件页面中的文件上传功能 为了在发送邮件的功能页面中添加文件上传支持，可以参考以下几个方面来设计和开发： #### 1. 前端部分：动态添加文件上传组件 前端可以通过 JavaScript 动态生成文件上传控件，允许用户多次选择并管理多个文件。以下是基于 HTML 和 JS 的实现方式[^3]。 ```javascript // 初始化变量用于存储已选文件的信息 let fileInputs = []; function addFileInput() { const container = document.getElementById('upload-container'); // 创建新的文件输入框及其关联的删除按钮 const newDiv = document.createElement('div'); newDiv.innerHTML = ` <input type="file" name="files[]" /> <button onclick="removeFile(this)">删除</button> `; container.appendChild(newDiv); // 更新全局数组记录新加入的 input 控制器 fileInputs.push(newDiv.querySelector('input')); } function removeFile(button) { button.parentElement.remove(); updateUploadButtonVisibility(); } function updateUploadButtonVisibility() { const uploadContainer = document.getElementById('upload-container'); const hasFiles = Array.from(uploadContainer.children).length > 0; document.getElementById('send-email-button').style.display = hasFiles ? 'inline-block' : 'none'; } ``` 上述代码实现了以下逻辑： - 用户每次点击“添加文件”按钮时，都会新增一个文件选择框。 - 如果用户想要移除某个文件选项，则通过对应的“删除”按钮完成操作。 - 当所有的文件选择框都被清除后，“发送邮件”的按钮会被自动隐藏。 #### 2. 后端处理：接收并保存上传文件 后端需要配置好能够解析 `multipart/form-data` 类型数据的服务接口，并按照业务需求对接收到的文件执行相应的动作（比如临时存储、压缩或者直接作为附件附加到电子邮件里）。这里给出 Python Flask 框架下简单的例子[^2]: ```python from flask import request, jsonify import os UPLOAD_FOLDER = '/path/to/the/uploads' ALLOWED_EXTENSIONS = {'txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'} def allowed_file(filename): return '.' in filename and \ filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS @app.route('/api/upload', methods=['POST']) def upload_files(): files = request.files.getlist('files[]') saved_paths = [] for file in files: if file.filename == '': continue if not allowed_file(file.filename): return jsonify({"error": f"{file.filename} is not an allowed extension"}), 400 path = os.path.join(UPLOAD_FOLDER, secure_filename(file.filename)) file.save(path) saved_paths.append(path) # 这里的saved_paths可用于后续邮件服务调用 return jsonify({'uploaded': saved_paths}), 200 ``` 该脚本片段展示了如何安全地获取客户端提交过来的一个或多份文件，并验证其扩展名是否合法后再将其写入服务器本地磁盘目录之中。 #### 3. 邮件集成：将上传后的文件附带至邮件正文 最后一步就是利用像 smtplib 或者第三方库 SendGrid 来构建一封包含这些附件在内的电子信函[^4]。下面是一个基本示例: ```python import smtplib from email.mime.multipart import MIMEMultipart from email.mime.text import MIMEText from email.mime.base import MIMEBase from email import encoders def send_email_with_attachments(to_address, subject, body, attachments): fromaddr = "your-email@example.com" msg = MIMEMultipart() msg['From'] = fromaddr msg['To'] = to_address msg['Subject'] = subject msg.attach(MIMEText(body, 'plain')) for attachment_path in attachments: part = MIMEBase('application', 'octet-stream') with open(attachment_path, "rb") as attachment: part.set_payload(attachment.read()) encoders.encode_base64(part) part.add_header( 'Content-Disposition', f'attachment; filename= {os.path.basename(attachment_path)}', ) msg.attach(part) server = smtplib.SMTP('smtp.example.com', 587) server.starttls() server.login(fromaddr, "password") text = msg.as_string() server.sendmail(fromaddr, to_address, text) server.quit() for uploaded_file in saved_paths: try: send_email_with_attachments("recipient@example.com", "Test Email", "Please find attached.", [uploaded_file]) finally: os.unlink(uploaded_file) # 删除临时文件以防泄露隐私信息 ``` 以上程序说明了怎样组合先前收集好的文件地址列表形成最终待寄送的内容体结构，同时确保每封发出之前先销毁原始副本防止敏感资料外泄风险。 --- ###