上传前如何预览图像,获得文件大小,图像高度和宽度?

阅读时长 4 分钟读完

在前端开发中,我们经常需要实现图片上传的功能。而在上传前,我们通常需要对图片进行预览,并获取其文件大小、高度和宽度等信息。本文将介绍如何实现这些功能。

文件预览

在上传之前,我们通常需要对用户选择的图片进行预览,以便用户确认选择是否正确。在 HTML5 中,可以使用 FileReader 对象来读取本地文件,并将其显示在页面上。

-- -------------------- ---- -------
------ ----------- ----------------
---- ------ ------ -------------

--------
----- --------- - --------------------------------------
----- ------- - -----------------------------------

------------------------------------ ------- -- -
  ----- ---- - ----------------------
  ----- ------ - --- -------------
  
  ------------- - --- -- -
    ----------- - ----------------
  --
  
  ---------------------------
---
---------

上述代码中,我们首先定义了一个 <input> 元素,用于选择要上传的图片。接着,我们创建了一个空的 <img> 元素,并为其指定了一个 id 属性,方便后续操作。

当用户选择完图片后,我们监听 change 事件,并使用 FileReader 对象读取图片文件,并将其转换成 DataURL 格式。最后,我们将 DataURL 赋值给 <img> 元素的 src 属性,即可实现图片预览的功能。

文件大小、高度和宽度

除了预览图片之外,我们还需要获取图片文件的大小、高度和宽度等信息。在 HTML5 中,可以使用 File 对象和 Image 对象来实现这些功能。

-- -------------------- ---- -------
------ ----------- ----------------
----
  --------------
  --- --------------------
  --------------
  --- -----------------------
  --------------
  --- ----------------------
-----

--------
----- --------- - --------------------------------------
----- -------- - -------------------------------------
----- ----------- - ----------------------------------------
----- ---------- - ---------------------------------------

------------------------------------ ------- -- -
  ----- ---- - ----------------------
  ----- ------ - --- -------------
  
  ------------- - --- -- -
    ----- ----- - --- --------
    
    ------------ - -- -- -
      -------------------- - ---------- - ---------------- - -----
      ----------------------- - -------------
      ---------------------- - ------------
    --
    
    --------- - ----------------
  --
  
  ---------------------------
---
---------

上述代码中,我们首先定义了一个 <input> 元素用于选择要上传的图片。接着,我们创建了三个 <dd> 元素,并为其指定了不同的 id 属性,方便后续操作。

当用户选择完图片后,我们监听 change 事件,并使用 FileReader 对象读取图片文件,并将其转换成 DataURL 格式。接着,我们创建了一个新的 Image 对象,并监听其 onload 事件。

当图片加载完成后,我们可以通过访问 Image 对象的 heightwidth 属性获取图片的高度和宽度。此外,我们还可以通过访问 File 对象的 size 属性获取图片文件的大小,以字节为单位。最后,我们将这些信息显示在相应的 <dd> 元素中,即可实现获取图片大小、高度和宽度等信息的功能。

总结

本文介绍了如何使用 HTML5 中的 FileReaderImage 对象来实现图片上传前的预览和获取文件大小、高度和宽度等信息的功能。通过本文的学习,读者可以掌握相关技术,并

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/11568

纠错
反馈