input file如何进行自定义的美化和预览

前言

  本篇博客解决两个问题:一是原生的<input type="file"/>非常的丑陋,本篇将介绍最简单的美化方法;二是原生的<input type="file"/>不支持实时预览,本篇将介绍一种简单地实现预览的方法。

美化

  思路:将原生的<input type="file"/>隐藏起来,用其他图片或者按钮来替代,当点击图片或者按钮时调用<input type="file"/>click方法。

html代码如下:

<img src="替代图片的路径" onclick="input_file()"> <input type="file" name="file" id="input-file">

js代码如下:

<script> function input_file() { $('#input-file').click(); } </script>

预览

  思路:在上一步的基础上,我们可以在<input type="file"/>上添加onchange事件,当我们选择了要上传的图片时,通过修改src实现图片的预览。

html代码如下:

<img src="替代图片的路径" onclick="input_file()" id="img-preview"> <input type="file" name="file" onchange="img_preview(this)" id="input-file">

js代码如下:

<script> function input_file() { $('#input-file').click(); } function img_preview(obj) { var file = obj.files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { //成功读取文件 var img = document.getElementById("img-preview"); img.src = e.target.result; //或 img.src = this.result / e.target == this }; } </script>

以上。


__EOF__

本文作者Marvin-wen
本文链接https://www.cnblogs.com/marvin-wen/p/14441486.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   Marvin-wen  阅读(904)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示