在前端开发中，我们经常需要实现图片上传的功能。而在上传前，我们通常需要对图片进行预览，并获取其文件大小、高度和宽度等信息。本文将介绍如何实现这些功能。
文件预览
在上传之前，我们通常需要对用户选择的图片进行预览，以便用户确认选择是否正确。在 HTML5 中，可以使用 FileReader 对象来读取本地文件，并将其显示在页面上。
------ ----------- ----------------
---- ------ ------ -------------
--------
----- --------- - --------------------------------------
----- ------- - -----------------------------------
------------------------------------ ------- -- -
----- ---- - ----------------------
----- ------ - --- -------------
------------- - --- -- -
----------- - ----------------
--
---------------------------
---
---------上述代码中，我们首先定义了一个 <input> 元素，用于选择要上传的图片。接着，我们创建了一个空的 <img> 元素，并为其指定了一个 id 属性，方便后续操作。
当用户选择完图片后，我们监听 change 事件，并使用 FileReader 对象读取图片文件，并将其转换成 DataURL 格式。最后，我们将 DataURL 赋值给 <img> 元素的 src 属性，即可实现图片预览的功能。
文件大小、高度和宽度
除了预览图片之外，我们还需要获取图片文件的大小、高度和宽度等信息。在 HTML5 中，可以使用 File 对象和 Image 对象来实现这些功能。
------ ----------- ----------------
----
--------------
--- --------------------
--------------
--- -----------------------
--------------
--- ----------------------
-----
--------
----- --------- - --------------------------------------
----- -------- - -------------------------------------
----- ----------- - ----------------------------------------
----- ---------- - ---------------------------------------
------------------------------------ ------- -- -
----- ---- - ----------------------
----- ------ - --- -------------
------------- - --- -- -
----- ----- - --- --------
------------ - -- -- -
-------------------- - ---------- - ---------------- - -----
----------------------- - -------------
---------------------- - ------------
--
--------- - ----------------
--
---------------------------
---
---------上述代码中，我们首先定义了一个 <input> 元素用于选择要上传的图片。接着，我们创建了三个 <dd> 元素，并为其指定了不同的 id 属性，方便后续操作。
当用户选择完图片后，我们监听 change 事件，并使用 FileReader 对象读取图片文件，并将其转换成 DataURL 格式。接着，我们创建了一个新的 Image 对象，并监听其 onload 事件。
当图片加载完成后，我们可以通过访问 Image 对象的 height 和 width 属性获取图片的高度和宽度。此外，我们还可以通过访问 File 对象的 size 属性获取图片文件的大小，以字节为单位。最后，我们将这些信息显示在相应的 <dd> 元素中，即可实现获取图片大小、高度和宽度等信息的功能。
总结
本文介绍了如何使用 HTML5 中的 FileReader 和 Image 对象来实现图片上传前的预览和获取文件大小、高度和宽度等信息的功能。通过本文的学习，读者可以掌握相关技术，并
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/11568