h5实现发帖

实现H5发帖功能的关键步骤

HTML结构设计 创建表单元素，包含标题、内容、图片上传等字段：

<div class="post-container">
  <input type="text" id="post-title" placeholder="输入标题">
  <textarea id="post-content" placeholder="输入内容"></textarea>
  <input type="file" id="image-upload" accept="image/*">
  <button id="submit-post">发布</button>
</div>

CSS样式优化 确保移动端友好显示：

.post-container {
  padding: 15px;
}
#post-title, #post-content {
  width: 100%;
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #ddd;
}
#image-upload {
  margin: 10px 0;
}

JavaScript交互逻辑 处理表单提交和图片预览：

document.getElementById('submit-post').addEventListener('click', function() {
  const title = document.getElementById('post-title').value;
  const content = document.getElementById('post-content').value;
  const imageFile = document.getElementById('image-upload').files[0];

  if(!title || !content) {
    alert('标题和内容不能为空');
    return;
  }

  const formData = new FormData();
  formData.append('title', title);
  formData.append('content', content);
  if(imageFile) formData.append('image', imageFile);

  fetch('/api/posts', {
    method: 'POST',
    body: formData
  }).then(response => {
    if(response.ok) {
      alert('发布成功');
      window.location.reload();
    }
  });
});

后端API对接 示例Node.js处理代码：

app.post('/api/posts', upload.single('image'), (req, res) => {
  const { title, content } = req.body;
  const imageUrl = req.file ? `/uploads/${req.file.filename}` : null;

  // 保存到数据库
  db.query('INSERT INTO posts SET ?', 
    { title, content, image_url: imageUrl },
    (error) => {
      if(error) return res.status(500).send();
      res.status(201).send();
    }
  );
});

移动端适配要点

• 添加viewport meta标签
• 使用rem单位进行响应式布局
• 实现图片压缩上传功能
• 添加加载状态提示

数据验证与安全

• 前端验证必填字段
• 后端进行XSS过滤
• 限制图片大小和类型
• 使用HTTPS传输数据

性能优化建议

• 实现本地草稿保存功能
• 使用Web Worker处理大图压缩
• 添加发布按钮防重复点击
• 采用分块上传大文件