javascript实现input file上传图片预览效果

本文实例介绍了javascript实现input file上传图片预览效果的详细代码，分享给大家供大家参考，具体内容如下 运行效果图： 具体实现代码: &lt;!DOCTYPE html> &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; [removed][removed] &lt;style type="text/css"&gt; .imgbox,.imgbox1 { float: left; margin-right: 2 在JavaScript中，实现input file上传图片预览效果是常见的前端功能，主要涉及到HTML、CSS以及JavaScript的事件处理和DOM操作。以下将详细解释这个过程。 HTML部分提供了用户交互的界面，通常包括一个`<input type="file">`元素，用户通过它选择本地图片。在给出的代码中，有多行这样的输入框，方便用户上传多张图片。每个输入框旁边都有一个关闭按钮（`<span class="close">X</span>`），用于删除已选的图片预览。此外，每个图片预览区域（`.imgbox`和`.imgbox1`）包含两个`<img>`元素，一个用于显示默认图片，另一个用于显示上传的图片。 CSS部分定义了这些元素的样式，如浮动、边距、宽高、边框等，以达到美观的布局效果。`.imgnum`类下的`<input type="file">`被设置为不透明度为0，使得用户看不到实际的文件选择按钮，而只能看到覆盖在其上的自定义图片（`btn.png`）。 JavaScript部分通常使用事件监听来处理文件选择。在本例中，使用jQuery库来简化DOM操作。当用户选择一个文件后，JavaScript会读取文件内容并创建一个`FileReader`对象，然后监听`load`事件。当文件读取完成时，`load`事件会被触发，此时可以将读取到的文件数据（通常是Base64编码的字符串）赋值给`<img>`元素的`src`属性，从而实现预览效果。同时，还需要处理删除图片的功能，即点击关闭按钮时移除对应的图片预览。 以下是核心的JavaScript代码示例： ```javascript $(document).ready(function() { // 监听所有的filepath输入框 $('.filepath').on('change', function(e) { var file = this.files[0]; if (file.type.match(/image.*/)) { var reader = new FileReader(); reader.onload = function(e) { var imgData = e.target.result; $(this).siblings('.img2').attr('src', imgData); $(this).parent().find('.close').show(); // 显示关闭按钮 }; reader.readAsDataURL(file); } else { alert('只支持图片文件!'); } }); // 删除图片 $('.close').on('click', function() { $(this).siblings('.img2').attr('src', ''); // 清空图片预览 $(this).hide(); // 隐藏关闭按钮 }); }); ``` 这段代码首先监听所有`.filepath`类的输入框的`change`事件，当文件选择改变时，读取文件并更新对应的图片预览。同时，当点击关闭按钮时，恢复图片预览区域的初始状态。 总结来说，实现JavaScript上传图片预览效果主要涉及以下步骤： 1. 创建HTML结构，包括`<input type="file">`和图片预览区域。 2. 使用CSS进行样式设计，使界面美观。 3. 使用JavaScript监听文件选择事件，读取文件并转换为Base64编码的字符串。 4. 将Base64编码的图片数据设置为`<img>`元素的`src`属性，实现预览。 5. 实现删除预览图片的功能，隐藏或移除相关元素。 以上就是利用JavaScript实现input file上传图片预览效果的详细过程，这个功能在许多网站的图片上传功能中非常常见，能给用户带来更好的交互体验。