关于 input【type=file】文件上传控件实现自定义文字及实时图片预览

最新推荐文章于 2023-11-17 16:06:30 发布

我心似海丶

最新推荐文章于 2023-11-17 16:06:30 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签： HTML js

本文链接：https://blog.csdn.net/qq_33212901/article/details/52587520

版权

本文介绍了如何使用HTML和JavaScript实现input[type=file]控件的自定义样式，包括隐藏原始控件，创建自定义按钮和文本输入框。当点击按钮时触发文件选择并实时预览图片。通过监听input[type=file]的change事件，更新文本框的值，并在非IE浏览器中使用window.URL.createObjectURL显示图片缩略图。

摘要由CSDN通过智能技术生成

前一阵写页面的时候用到过 input【type=file】来实现文件上传，发现改控件无法自己定义属性，而且在不同浏览器形式还各不相同，所以就想着把控件美化一下，自己定义格式，并且选择图片后会自动展示图片缩略图。

首先看一下改进后的效果：

然后就是方法了。其实做成这个效果非常简单，思路就是隐藏原来的input【type=file】控件，然后自己定义一个input button和input text，然后我们在点击自定义button时，实际触发input file的click事件，并将其value给到input text，至于缩略图展示，也是在触发input file的click事件，将图片展示到我们自定义的img中。

以下就是代码：

<input id="img" type="file" style="display:none"/>
<input id ="button" type="button" name="" value="选择封面图片" οnclick="javascrtpt:openfile();"/>   
<input type&