写一段js，用表单提交的方式上传文件

好的，以下是一个简单的示例：

<form id="upload-form" enctype="multipart/form-data">
  <input type="file" name="file">
  <button type="submit">上传文件</button>
</form>

const form = document.getElementById('upload-form');

form.addEventListener('submit', (event) => {
  event.preventDefault(); // 防止表单自动提交
  const formData = new FormData(form); // 获取表单数据
  fetch('/upload', { // 发送上传请求
    method: 'POST',
    body: formData
  })
  .then(response => {
    console.log('上传成功');
  })
  .catch(error => {
    console.error('上传失败', error);
  });
});

在上面的示例中，我们使用了 `FormData` 对象来获取表单数据，并使用 fetch API 发送了一个 POST 请求到 `/upload` 接口。你需要将这个接口替换成你自己的后端接口。

相关问题

请用js写一段代码，用表单形式显示，第一行表单可以输入文本区域，第二个表单可以上传radio文件，第三个表单可以上传和显示图片，第四个表单可以上传显示和下载附件。

好的，以下是JS代码段：

<form>
  <label for="text">文本：</label>
  <textarea id="text" name="text"></textarea><br>

  <label for="file">文件：</label>
  <input type="file" id="file" name="file"><br>

  <label for="image">图片：</label>
  <input type="file" id="image" name="image"><br>
  <img id="imgPreview" src="#" alt="图片预览"><br>

  <label for="attachment">附件：</label>
  <input type="file" id="attachment" name="attachment"><br>

  <button type="submit">提交</button>
</form>

<script>
  // 预览图片
  document.getElementById("image").addEventListener("change", function() {
    const file = this.files[0];
    const reader = new FileReader();
    reader.onload = function(e) {
      document.getElementById("imgPreview").src = e.target.result;
    };
    reader.readAsDataURL(file);
  });
</script>

以上代码可以实现所需的表单功能，其中预览图片部分使用了JS FileReader API。

给我写一段js 文件上传

以下是一个简单的JS文件上传示例：

HTML代码：

<form method="POST" enctype="multipart/form-data">
  <input type="file" name="fileToUpload" id="fileToUpload">
  <input type="submit" value="上传文件" name="submit">
</form>

JavaScript代码：

const form = document.querySelector('form');
form.addEventListener('submit', e => {
  e.preventDefault(); // 防止表单提交
  const files = document.querySelector('[type=file]').files;
  const formData = new FormData();
  for (let i = 0; i < files.length; i++) {
    let file = files[i];
    formData.append('fileToUpload[]', file);
  }
  fetch('upload.php', {
    method: 'POST',
    body: formData
  }).then(response => {
    console.log(response);
  }).catch(error => {
    console.error(error);
  });
});

此代码通过事件监听器防止表单提交，然后获取选择的文件并将其添加到FormData对象中。FormData对象可以通过POST请求发送到服务器。fetch()函数用于发送POST请求，并处理响应。在后台，您可以使用PHP等服务器端语言来处理文件上传。