在前端开发中，我们经常需要上传多个图片或者其他类型的文件。而为了提高用户体验，我们通常会在上传界面中加入文件预览功能，方便用户确认自己选择的文件是否正确。那么如何通过file标签实现上传多图文件同时进行预览呢？
HTML结构
首先我们需要在HTML中创建一个表单元素，用于文件上传。表单中需要添加一个input标签，属性值为type="file"，同时还要添加一个div元素，用于显示预览图像。
<form enctype="multipart/form-data"> <input type="file" name="files[]" multiple> <div id="preview"></div> </form>
这里需要注意的是，name属性必须为files[]，并且添加multiple属性，表示可以选择多个文件进行上传。
JS实现文件预览
接下来我们需要在JS中编写代码，使得选中的文件能够实时预览到页面上。具体实现过程如下：
-- -------------------- ---- -------
----- ----- - ---------------------------------------------
----- ------- - -----------------------------------
-------------------------------- -- -- -
----- ----- - ------------
--- ---- - - -- - - ------------- ---- -
----- ---- - ---------
-- --------------------------------- ---------
----- --- - ------------------------------
---------------------------------
-------- - -----
----- ------ - --- -------------
------------- - --------------- -
------ ----------- -
-------- - ----------------
--
--------
---------------------------
-------------------------
-
---以上代码中，我们首先获取了input标签以及用于预览的div元素。接着监听input的change事件，当用户选择了文件后会触发该事件。
在事件处理函数中，我们首先通过input.files属性获取到选中的所有文件。然后遍历每个文件，对于非图像类型的文件直接跳过，对于图像类型的文件则创建一个img元素，并将该文件存储在file属性中。接着使用FileReader对象将该文件读取为Data URL格式，在onload回调函数中将读取到的内容赋给src属性，从而实现了图片预览效果。
最后，将img元素添加到preview元素中即可完成预览。
总结
本文介绍了如何利用file标签实现多图文件上传预览的方法，通过HTML和JavaScript的结合，可以帮助我们快速实现这一常见功能。同时，需要注意的是，不同浏览器对于file标签的支持有所差异，因此在实际开发中，需要进行兼容性测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2136