web前端怎么做一个方框，方框里面有一个加号，点击可以上传文件

在Web前端，你可以使用HTML、CSS和JavaScript结合起来创建这样的交互式文件上传元素。首先，你需要一个基本的HTML结构，包含一个按钮和一个输入元素（用于隐藏文件选择的`<input type="file">`）。在这个输入元素上，我们可以添加样式使其看起来像一个方块，并显示一个加号图标：

<div class="upload-box">
  <button class="upload-button" title="点击选择文件"><i class="fa fa-plus"></i></button>
  <input type="file" id="file-input" style="display: none;">
</div>

然后，用CSS设置样式，例如Bootstrap CSS库中的`btn`类，或者自定义样式：

.upload-box {
  position: relative;
  display: inline-block;
}

.upload-button {
  background-color: #f0f0f0; /* 样式颜色 */
  border: none;
  padding: 8px 16px;
  cursor: pointer;
}

.upload-button i {
  font-size: 18px;
  color: #6c757d;
}

最后，JavaScript用于监听`click`事件，在用户点击按钮时触发文件选择：

document.querySelector('.upload-button').addEventListener('click', function(e) {
  e.stopPropagation(); // 阻止事件冒泡到父元素
  this.nextSibling.click(); // 点击隐藏的`<input>`元素打开文件选择
});

这样，当用户点击“+”按钮时，会弹出一个文件选择窗口，可以选择文件后上传。