js原生实现图片上传及预览

最新推荐文章于 2023-10-26 09:05:13 发布

qq_42883274

最新推荐文章于 2023-10-26 09:05:13 发布

阅读量481

点赞数 1

分类专栏： JavaScript学习文章标签： javascript html

本文链接：https://blog.csdn.net/qq_42883274/article/details/115497771

版权

JavaScript学习专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用JavaScript的FormData对象处理用户选择的文件，包括从file-input获取文件、添加到FormData并实现图片预览。重点展示了如何将文件对象提交给后端服务器以及Blob对象在图片预览中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文件对象：FormData的实例

html结构

<!-- file类型的input -->
<input type="file" id="file" multiple />
<button onclick="sendFile()">点击获取文件对象</button>
<!-- 一般文件上传，都是把用户选的file-input的文件对象发送给后端 -->
<div>
  <img id='imgPreview' src="" alt="">
</div>

js逻辑

function sendFile() {
  const file = document.querySelector('#file')
  const fileObj = file.files[0]
  console.log(file.files[0])
  // 然后把文件对象放到 FormData 中提交给后端
  const fd = new FormData()
  fd.append('字段名称', fileObj)
  // 如果是图片文件，可以处理图片预览
  const blob = window.URL.createObjectURL(fileObj)
  // blob 数据可以直接赋值给图片的src展示
  document.querySelector('#imgPreview').src = blob
}