改变文件上传input file类型的外观

最新推荐文章于 2022-03-16 10:44:10 发布

转载最新推荐文章于 2022-03-16 10:44:10 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/YeChing/p/6708070.html

本文介绍了一种技巧，通过隐藏原始的文件输入框并用自定义按钮替代，来改变默认文件上传按钮的样式。这种方法允许开发者对按钮进行完全的定制。

当我们使用文件上传功能时，<input type="file">,但是外观有点不符合口味，如何解决这个问题？

<input type="file" id="fileInput" style="display:none;">
<input id="img-upload" type="button"  onclick="showFileInput()" value="点击上传照片">


<script>
function showFileInput(){
    var fileInput=document.getElementById("fileInput");
    fileInput.click();
}
</script>

还是用到了input的上传功能，只不过不在点击它，而是通过点击button,从而传递到file,实现间接点击file按钮，功能实现了，下面就可以随意对button修改你想要的样式了

转载于:https://www.cnblogs.com/YeChing/p/6708070.html