createObjectURL方法实现本地图片预览

下面是关于 "createObjectURL方法实现本地图片预览" 的完整攻略，包括了示例说明。

简介

createObjectURL 是 HTML5 新增的 API，用于将 Blob 对象或 File 对象转换为 URL。在浏览器中使用该 URL 可以进行本地文件预览，常用于图片和视频的预览。

示例

下面是一个简单的示例，实现点击按钮上传图片并显示预览图。

HTML 代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>createObjectURL</title>
  </head>
  <body>
    <input type="file" id="file-input"/>
    <button id="preview-btn">预览</button>
    <div id="preview-container"></div>
    <script src="./index.js"></script>
  </body>
</html>

JavaScript 代码

const fileInput = document.getElementById('file-input')
const previewBtn = document.getElementById('preview-btn')
const previewContainer = document.getElementById('preview-container')

previewBtn.addEventListener('click', () => {
  if (fileInput.files.length === 0) return

  const file = fileInput.files[0]
  const blobUrl = URL.createObjectURL(file)

  const previewEl = document.createElement('img')
  previewEl.src = blobUrl

  previewContainer.appendChild(previewEl)
})

在上面的代码中，我们定义了一个 file input 元素和一个预览按钮，当用户选择文件并点击预览按钮时，通过 createObjectURL 方法将 File 对象转换成 blob URL，并将其赋值给 img 元素的 src 属性，以实现本地图片预览效果。

下面是另一个示例，实现拖拽图片到页面区域并显示预览图。

HTML 代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>createObjectURL</title>
  </head>
  <body>
    <div id="drop-container">将图片拖拽至此区域</div>
    <div id="preview-container"></div>
    <script src="./index.js"></script>
  </body>
</html>

JavaScript 代码

const dropContainer = document.getElementById('drop-container')
const previewContainer = document.getElementById('preview-container')

dropContainer.addEventListener('dragover', (event) => {
  event.preventDefault()
})

dropContainer.addEventListener('drop', (event) => {
  event.preventDefault()

  const file = event.dataTransfer.files[0]
  const blobUrl = URL.createObjectURL(file)

  const previewEl = document.createElement('img')
  previewEl.src = blobUrl

  previewContainer.appendChild(previewEl)
})

在上面的代码中，我们定义了一个页面区域用于接受拖拽图片，并在 dragover 和 drop 事件中设置了默认行为。当用户拖拽图片进入页面区域并释放鼠标时，通过 createObjectURL 方法将 File 对象转换成 blob URL，并将其赋值给 img 元素的 src 属性以实现本地图片预览效果。

总结

通过上述示例可以看出，利用 createObjectURL 方法实现本地图片预览非常简单，只需要将 File 对象或 Blob 对象转换成 URL，并将其赋值给 img 元素或其他预览容器的属性即可实现预览效果。同时需要注意的是，在页面卸载时也需要释放 URL 对象，避免引起内存泄漏。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：createObjectURL方法实现本地图片预览 - Python技术站

createObjectURL方法实现本地图片预览

简介

示例

总结

相关文章