怎么用js实现网页端给服务器上传文件

### 回答1：
要用JavaScript实现网页端给服务器上传文件，可以使用XMLHttpRequest对象或Fetch API来实现。

以下是使用XMLHttpRequest对象上传文件的示例代码：

var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
var formData = new FormData();
formData.append('file', file);
xhr.send(formData);

在这个示例中，我们首先获取了文件输入框的DOM元素，然后获取了用户选择的文件。接着，创建了一个XMLHttpRequest对象，并设置了请求的方法、URL和异步标志位。然后，设置了请求头部的Content-Type字段为multipart/form-data，表示这是一个文件上传请求。在XMLHttpRequest对象的onreadystatechange回调函数中，判断请求的状态和响应的状态码，如果都符合要求，就输出响应的文本内容。

接下来，我们创建了一个FormData对象，并调用其append方法，将文件添加到请求体中。最后，使用XMLHttpRequest对象的send方法发送请求。

Fetch API也提供了上传文件的接口，使用方法类似，示例代码如下：

var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);
fetch('/upload', {
  method: 'POST',
  body: formData
})
.then(function(response) {
  if (response.ok) {
    return response.text();
  }
  throw new Error('Network response was not ok.');
})
.then(function(text) {
  console.log(text);
})
.catch(function(error) {
  console.log('There was a problem with the fetch operation:', error);
});

在这个示例中，我们首先获取了文件输入框的DOM元素，然后获取了用户选择的文件。接着，创建了一个FormData对象，并调用其append方法，将文件添加到请求体中。然后，使用fetch函数发送POST请求，并将FormData对象作为请求体。在响应的Promise对象中，判断响应是否正常，并输出响应的文本内容。如果发生异常，捕获并输出错误信息。

### 回答2：
要在网页端使用 JavaScript 实现文件上传功能，可以使用 HTML5 的 FormData 对象和 AJAX 技术。

首先，在 HTML 页面中添加一个文件上传表单：

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="uploadFile" id="fileInput">
  <input type="button" value="上传" onclick="uploadFile()">
</form>

接下来，编写 JavaScript 函数 `uploadFile()` 来处理文件上传：

function uploadFile() {
  var fileInput = document.getElementById("fileInput");
  var file = fileInput.files[0];
  
  var formData = new FormData();
  formData.append("file", file);

  var xhr = new XMLHttpRequest();
  xhr.open("POST", "服务器接收文件的URL", true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      // 文件上传成功，服务器返回的响应数据
      var response = xhr.responseText;
      console.log(response);
    }
  };
  xhr.send(formData);
}

在这段代码中，首先通过 `getElementById` 方法获取文件输入框的元素，然后获取用户选择的文件，并创建一个新的 `FormData` 对象。通过 `append` 方法将文件添加到 FormData 对象中，其中第一个参数为服务器接收文件时的字段名称。

然后，创建一个新的 XMLHttpRequest 对象，并使用 `open` 方法指定 HTTP 方法和服务器接收文件的 URL。设置 `onreadystatechange` 事件处理函数来监听请求状态的变化。当 `readyState` 为 4 且 `status` 为 200 时，表示文件上传成功，可以通过 `responseText` 属性获取服务器返回的响应数据。

最后，通过调用 `send` 方法将 FormData 对象发送到服务器。

这样，就可以实现网页端给服务器上传文件的功能。请注意，服务器端也需要相应的处理来接收和保存文件。

### 回答3：
要使用JavaScript在网页端给服务器上传文件，可以使用XMLHttpRequest对象或者Fetch API。

以下是使用XMLHttpRequest对象的实现方法：
1. 首先在HTML页面中创建一个表单，包含一个<input type="file"> 标签用于选择文件。
2. 在JavaScript中获取到该文件输入框的引用。
3. 创建一个XMLHttpRequest对象。
4. 使用FormData对象创建一个表单数据对象，并将文件添加到其中。
5. 使用XMLHttpRequest对象的open()方法，指定请求类型和服务器端的URL地址。
6. 设置XMLHttpRequest对象的onreadystatechange事件监听器，用于监测请求状态的变化。
7. 使用XMLHttpRequest对象的send()方法，将表单数据发送到服务器。
8. 在onreadystatechange事件的回调函数中，可以处理服务器端返回的响应。

以下是使用Fetch API的实现方法：
1. 在HTML页面中创建一个表单，包含一个<input type="file"> 标签用于选择文件。
2. 在JavaScript中获取到该文件输入框的引用。
3. 使用FormData对象创建一个表单数据对象，并将文件添加到其中。
4. 使用fetch()函数，向服务器端的URL地址发送请求，设置请求方法为POST，并将表单数据作为请求体。
5. 处理fetch()函数返回的Promise对象，判断请求是否成功，并进行相关处理。

无论是使用XMLHttpRequest对象还是Fetch API，上传文件时注意设置合适的请求头，以及处理服务器端的响应。