我悟了!原来本地图片预览还能这样搞

Hey, 我是 Immerse
本文首发于 【沉浸式趣谈】,我的个人博客 https://yaolifeng.com 也同步更新。
转载请在文章开头注明出处和版权信息。
如果本文对您有所帮助,请点赞、评论、转发,支持一下,谢谢!
我悟了!原来本地图片预览还能这样搞
在网页开发中,经常会遇到需要让用户上传图片并在上传前进行预览的需求。这样做的好处显而易见:用户可以立即看到自己选择的图片是否正确,避免了不必要的上传和服务器资源浪费,提升了用户体验。
今天,我们就来一起学习如何使用原生 JavaScript 实现本地图片上传预览功能。我们将使用两种常用的 API:FileReader
和 createObjectURL
,并分别进行详细讲解和示例演示。
准备工作:HTML 结构
首先,我们需要在 HTML 中搭建一个简单的结构,用于文件上传和图片预览。主要包含两个元素:
<input type="file">
: 用于让用户选择本地文件。<img>
: 用于展示预览图片。
在上面的 HTML 代码中:
<input type="file" id="imageUpload" accept="image/*">
创建了一个文件上传控件,id="imageUpload"
方便我们之后用 JavaScript 获取到它。accept="image/*"
限制了用户只能选择图片类型的文件,image/*
表示接受任何类型的图片文件。<img id="imagePreview" src="#" alt="图片预览" ...>
创建了一个<img>
标签,id="imagePreview"
同样是为了方便 JavaScript 操作。src="#"
先设置一个默认的无效图片地址,alt="图片预览"
是当图片无法显示时的替代文字。style="..."
设置了图片预览区域的最大宽高和边框样式,您可以根据实际需求调整。
方法一:使用 FileReader API
FileReader
是一个非常强大的 API,它可以异步读取用户本地文件内容。对于图片预览来说,我们可以使用 FileReader
将图片文件读取为 Data URL,然后将其设置为 <img>
标签的 src
属性,从而实现预览。
步骤 1:获取元素
首先,在 <script>
标签中,我们需要获取到 HTML 中的 input file
和 img
元素:
步骤 2:监听 change
事件
我们需要监听 input file
的 change
事件。当用户选择了文件后,这个事件会被触发。
步骤 3:创建 FileReader 对象并读取文件
在 change
事件处理函数中,我们需要创建 FileReader
对象,并使用 readAsDataURL()
方法来读取文件内容。readAsDataURL()
方法会将文件读取为 Data URL 格式的字符串。
代码解释:
const reader = new FileReader();
: 创建一个新的FileReader
对象。reader.onload = function(e) { ... }
: 设置FileReader
的onload
事件处理函数。当文件读取成功后,这个函数会被调用。e.target.result
: 在onload
事件中,e.target.result
属性包含了读取到的文件内容,对于readAsDataURL()
方法来说,这里就是 Data URL 字符串。imagePreview.src = e.target.result;
: 将 Data URL 字符串设置为imagePreview
(即<img>
标签) 的src
属性,浏览器会自动解析 Data URL 并显示图片。imagePreview.alt = file.name;
: 可选操作,将上传的文件名设置为<img>
标签的alt
属性,这有助于提高页面的可访问性。reader.readAsDataURL(file);
: 调用reader
的readAsDataURL()
方法开始异步读取文件。参数file
就是用户选择的文件对象。
完整代码示例 (FileReader 方法):
方法二:使用 createObjectURL API
createObjectURL
(或者更准确的说是 URL.createObjectURL()
) 是另一个用于创建临时 URL 的 API。与 FileReader
不同,createObjectURL
直接为文件对象创建一个临时的 URL,这个 URL 可以直接设置为 <img>
的 src
属性,而无需读取文件内容。
步骤 1 & 步骤 2: 获取元素和监听 change
事件 (与 FileReader 方法相同)
这部分代码和 FileReader 方法完全一样,您可以直接复制粘贴。
步骤 3:使用 createObjectURL
创建临时 URL
在 change
事件处理函数中,使用 URL.createObjectURL(file)
方法为选择的文件对象创建一个临时 URL,并将其设置为 <img>
的 src
属性。
代码解释:
const imageUrl = URL.createObjectURL(file);
: 调用URL.createObjectURL(file)
方法,传入用户选择的文件对象file
,它会返回一个临时的 URL 字符串。这个 URL 代表了文件在内存中的位置。imagePreview.src = imageUrl;
: 将imageUrl
设置为imagePreview
的src
属性,浏览器会根据这个临时 URL 加载并显示图片。
需要注意:
createObjectURL
创建的 URL 是临时的,它指向的是浏览器内存中的文件数据。当页面关闭或文档卸载时,这些临时 URL 会被释放。如果您需要手动释放通过
createObjectURL
创建的 URL,可以使用URL.revokeObjectURL(imageUrl)
方法。虽然在简单的图片预览场景下,浏览器通常会自动管理这些临时 URL,但在更复杂的应用中,手动释放可能是一个好习惯,尤其是在处理大量文件或需要长时间保持页面活跃的情况下。
完整代码示例 (createObjectURL 方法):
两种方法的比较
如何选择?
如果注重兼容性,或者需要将图片数据持久化保存,可以选择 FileReader。
如果更注重性能,尤其是处理大文件,并且不需要持久化保存图片数据,可以选择 createObjectURL。 对于大多数现代网页应用来说,
createObjectURL
通常是一个更优的选择,因为它更简洁高效。
总结
好啦,简单总结一下 FileReader
和 createObjectURL
这俩兄弟。
FileReader
就像个老实人:
优点: 兼容性好,数据格式(Data URL)能存起来以后用。
缺点: 大文件处理慢一点点。
适合: 要兼容老浏览器,或者需要保存图片数据。
createObjectURL
像个急性子:
优点: 速度快,尤其大文件预览嗖嗖的。 代码简单。
缺点: 临时链接用完就没了,不方便存,兼容性稍逊一点点(但也够用啦)。
适合: 追求速度,预览完就完事儿,不用保存图片。
怎么选?
要稳妥、要存图 ->
FileReader
要速度、图不存 ->
createObjectURL
总之,根据你的实际情况选就行!
希望这个简短总结能帮到你快速做决定。
动手试试才是王道! 加油!
版权声明: 本文为 InfoQ 作者【沉浸式趣谈】的原创文章。
原文链接:【http://xie.infoq.cn/article/906c833ee2dd194e483307b45】。
本文遵守【CC BY-ND】协议,转载请保留原文出处及本版权声明。
评论