表单与文件 | 任先生的笔记库

# 1、FormData 对象

FormData 是一个内置的 JavaScript 对象，用于创建表单数据，并以键值对 key/value 的形式进行数据的管理。它通常用于将表单数据通过 AJAX 请求发送到服务器。

在使用 FormData 对象时，不需要显式设置请求头的 Content-Type 为 multipart/form-data。这是因为在发送包含 FormData 对象的 AJAX 请求时，浏览器会自动设置适当的请求头

FormData 接口 (opens new window)

使用示例

// 1、使用方式1
var formElement = document.getElementById('myForm')
var formData = new FormData(formElement)

///2、使用方式2
var formData = new FormData()
// 单个
formData.append('username', 'John')
formData.append('email', 'john@example.com')
// 批量
// Object.keys(this.pubForm).forEach((key) => {
//   fd.append(key, this.pubForm[key])
// })

// ================

var xhr = new XMLHttpRequest()
xhr.open('POST', 'https://api.example.com/submit')

xhr.send(formData)
 
        Copied!

# 2、FileReader 对象

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File (opens new window) 或 Blob 对象指定要读取的文件或数据。

FileReader 对象 (opens new window)

File 对象

File 对象可以是来自用户在一个<input>元素上选择文件后返回的 FileList (opens new window) 对象，也可以来自拖放操作生成的 DataTransfer (opens new window) 对象，还可以是来自在一个 HTMLCanvasElement 上执行 mozGetAsFile()方法后返回结果

FileList

<input class="file" type="file" />

<button class="upload">上传文件</button>
<img id="imgPreview" src="" alt="图片预览" />
 
        Copied!

文件上传

const uploadBtn = document.querySelector('.upload')

uploadBtn.onclick = function () {
  const fileList = document.querySelector('.file').files

  const formData = new FormData()
  formData.append('avatar', fileList[0])

  // ================

  var xhr = new XMLHttpRequest()
  xhr.open('POST', 'https://api.example.com/submit')

  xhr.send(formData)
}
 
        Copied!

图片预览

const previewElm = document.querySelector('#imgPreview')

document.querySelector('.file').onchange = function (event) {
  const fileList = event.target.files

  // ================
  // 1、使用base64字符串【data:image/jpeg;base64,/ 开头】

  const reader = new FileReader()
  reader.readAsDataURL(fileList[0])

  reader.onload = function (e) {
    // console.log(e.target); // FileReader对象
    previewElm.src = e.target.result
  }

  // ================
  // 2、使用内存临时地址【blob:http://localhost:8080/ 开头】

  previewElm.src = URL.createObjectURL(fileList[0])
  URL.revokeObjectURL(URL.createObjectURL(fileList[0])) // 释放资源
}
 
        Copied!

DataTransfer

<div id="dropZone" style="width: 200px;height: 200px;background: skyblue;">放置区域</div>

<img id="imgPreview" src="" alt="图片预览" />
 
        Copied!

拖动图片预览

const dropZone = document.getElementById('dropZone')
const previewElm = document.querySelector('#imgPreview')

// 拖动流程
dropZone.ondragover = function (event) {
  event.preventDefault() // 防止不能drop
}

dropZone.ondrop = function (event) {
  const fileList = event.dataTransfer.files

  // ================

  if (fileList[0].type.match('image.*')) {
    previewElm.src = URL.createObjectURL(fileList[0])
    URL.revokeObjectURL(URL.createObjectURL(fileList[0]))
  }

  event.preventDefault() // 防止页面跳转
}
 
        Copied!

← XHR请求 Fetch请求 →