前端上传文件的代码

前端上传文件可以使用 input 标签的 type="file" 属性来实现，下面是一个简单的示例代码：

<form>
  <input type="file" name="upload-file">
  <button type="submit">上传</button>
</form>

当用户选择文件后，点击提交按钮时，表单数据会被发送到服务器上。在后端服务器中可以通过解析表单数据来获取上传的文件并进行处理。

如果需要在前端上传文件时对文件进行限制，比如文件类型、大小等，可以通过 JavaScript 来实现。以下是一个示例代码：

<form>
  <input type="file" name="upload-file" accept=".jpg,.png" onchange="validateFile(this)">
  <button type="submit">上传</button>
</form>

<script>
function validateFile(input) {
  const file = input.files[0];
  if (file.size > 1024 * 1024) {
    alert('文件大小不能超过1MB');
    input.value = '';
    return;
  }
  if (!/^image\/(jpeg|png)$/.test(file.type)) {
    alert('只能上传 JPG 或 PNG 格式的图片');
    input.value = '';
    return;
  }
}
</script>

上面的代码中，accept 属性用于限制上传的文件类型，onchange 事件会在用户选择文件后触发，validateFile 函数用于对文件进行验证。如果文件不符合要求，则弹出提示并清空 input 元素的值。