JS上传图片及预览功能实例分析
在前端开发中，上传图片并预览是一个常见的需求。本文将介绍如何使用 JavaScript 实现图片上传及预览功能，并提供相应的代码示例。
文件上传
HTML5 提供了 input 标签的 type="file" 属性，可以让用户选择本地文件进行上传。在表单中添加如下代码即可创建一个文件上传输入框：
------ ----------- ------------
提交表单时，选定的文件将作为表单数据的一部分被发送至服务器。
获取文件信息
通过 JavaScript 可以获取上传文件的相关信息，例如文件名、大小和 MIME 类型等。
----- ----- - --------------------------------------------- -------------------------------- ------- -- - ----- ---- - ---------------------- ------------------ --------------- ------------------ ------------ -------- ------------------ --------------- ---
在上面的代码中，我们监听了文件上传输入框的 change 事件，获取了所选文件的相关信息，并打印到了控制台中。
上传文件
要想将文件上传至服务器，需要使用 AJAX 或 Form 表单等方式发送请求。以下是使用 XMLHttpRequest 对象实现文件上传的示例代码：
----- ----- - --------------------------------------------- -------------------------------- ------- -- - ----- ---- - ---------------------- ----- --- - --- ----------------- ----- -------- - --- ----------- ----------------------- ------ ---------------- ----------- ------------------- ---
在上面的代码中，我们创建了一个 XMLHttpRequest 对象，并将上传文件作为 FormData 的一部分发送至服务器。其中，append 方法用于将文件添加至表单数据中，open 方法和 send 方法则用于发送请求。
图片预览
除了上传文件外，还可以使用 JavaScript 实现图片预览功能，使用户能够在本地浏览器中查看所选图片的缩略图。
创建预览图像
要实现图片预览功能，需要在 HTML 中添加一个 img 标签用于显示缩略图，并用 JavaScript 将所选文件转换为 Data URL （Base64编码的字符串），并将其赋值给 src 属性。
------ ----------- ------------ ---- -------------
----- ----- - ---------------------------------------------
----- ------- - -----------------------------------
-------------------------------- ------- -- -
----- ---- - ----------------------
----- ------ - --- -------------
------------------------------- -- -- -
----------- - --------------
---
---------------------------
---在上面的代码中，我们首先获取了文件上传输入框和预览图片节点，监听了上传输入框的 change 事件，使用 FileReader 对象将所选文件转换为 Data URL 并赋值给 src 属性，从而实现了图片预览功能。
图片压缩
上传大型图片可能会导致服务器负载较高，因此，在上传前可以对图片进行压缩处理。以下是使用 JSZip 库实现图片压缩的示例代码：
----- ----- - ---------------------------------------------
-------------------------------- ------- -- -
----- ---- - ----------------------
----- ------ - --- -------------
------------------------------- -- -- -
----- --- - --- --------
------- - --------------
---------------------------- -- -- -
----- ------ - ---------------------------------
----- --- - ------------------------
----- --------- - ----
----- ---------- - ----
--- ----- - ----------
--- ------ - -----------
-- ------ - ------- -
-- ------ - ---------- -
------ -- --------- - ------
----- - ----------
-
- ----
- ---------------------------------------------------------- --------
-------------------------------------------------------------------------------------