jquery+FileReader上传文件

> 使用` jQuery` 和 `FileReader` 可以实现上传文件的功能。以下是一个简单的示例代码：

HTML：

```html
<form>
  <input type="file" id="fileInput">
  <button type="button" id="uploadButton">上传</button>
</form>
```

JavaScript：

```js
var fileInput = document.getElementById("fileInput");
var uploadButton = document.getElementById("uploadButton");

uploadButton.addEventListener("click", function() {
  var file = fileInput.files[0];
  var reader = new FileReader();

reader.onload = function() {
    var dataURL = reader.result;
    $.ajax({
      url: "/upload",
      type: "POST",
      data: {
        file: dataURL
      },
      success: function(response) {
        console.log("上传成功！");
      },
      error: function(jqXHR, textStatus, errorThrown) {
        console.log("上传失败：", textStatus);
      }
    });
  };
  reader.readAsDataURL(file);
});
```
在上述代码中，首先获取文件选择框和上传按钮的 DOM 元素，然后监听上传按钮的点击事件。当上传按钮被点击时，获取文件选择框中选择的文件，创建一个 FileReader 对象，并使用 `readAsDataURL()` 方法读取文件内容。当文件读取完成时，onload 事件被触发，可以通过 result 属性获取文件的内容，并将其作为参数发送到服务器。

> 需要注意的是，`readAsDataURL()` 方法将文件内容转换为 Data URL 格式，可以在客户端直接显示或传输到服务器。在使用 $.ajax() 方法发送数据时，需要将 Data URL 格式的文件内容作为参数传递。服务器端需要根据请求参数来解析文件内容，并进行相应的处理。

相关推荐

近期文章