如何用HTML和JS实现一个自定义上传图片按钮并展示图片功能？

本文共计1250个文字，预计阅读时间需要5分钟。

本文实例讲述了使用JS+HTML实现自定义上传图片按钮并显示图片功能的方法。分享给家长供参考，具体如下：

在web开发中，上传文件功能可以通过type为file的input标签实现。以下是一个简单的示例：

javascriptdocument.getElementById('uploadBtn').addEventListener('change', function() { var file=this.files[0]; if (file) { var reader=new FileReader(); reader.onload=function(e) { document.getElementById('previewImg').src=e.target.result; }; reader.readAsDataURL(file); }});

这段代码中，我们首先为file类型的input标签添加了一个change事件监听器。当用户选择文件后，会触发这个事件。在事件处理函数中，我们获取到用户选择的文件，并使用FileReader对象将其读取为DataURL格式。然后，我们将这个DataURL赋值给img标签的src属性，从而实现图片的预览功能。

本文实例讲述了JS+HTML实现自定义上传图片按钮并显示图片功能的方法。分享给大家供大家参考，具体如下：

在web开发中，上传文件功能通过type为file的input标签即可实现。但input的显示效果仅为一个按钮，且不能修改UI。