首页 > 网页制作 >Amaze UI 文件选择域的示例代码

Amaze UI 文件选择域的示例代码

来源：互联网 2026-05-04 11:47:09

文件选择域这块骨头，可以说是前端开发中公认的“硬茬”。它的原生样式由浏览器牢牢控制，直接用CSS去打扮它，往往事倍功半。所以，行业内最常见的“整容”方案其实很直接：把它本身变得透明，然后覆盖在一个我们精心设计好的自定义按钮或区域上，来个“偷梁换柱”。来看看下面这段典型的HTML结构：选择要上传

文件选择域

这块骨头，可以说是前端开发中公认的“硬茬”。它的原生样式由浏览器牢牢控制，直接用CSS去打扮它，往往事倍功半。所以，行业内最常见的“整容”方案其实很直接：把它本身变得透明，然后覆盖在一个我们精心设计好的自定义按钮或区域上，来个“偷梁换柱”。

来看看下面这段典型的HTML结构：

长期稳定更新的攒劲资源： >>>点此立即查看<<<


  
  





   选择要上传的文件

实现后的效果如下图所示：

不过，这个官方方案有个小遗憾：用户选好文件后，按钮上的文字和图标纹丝不动，完全看不出来到底选了哪个文件。这体验，总觉得差了点火候。

于是，不妨动手加点“魔法”。核心思路很简单：监听文件选择域的变化，一旦有文件被选中，就把前面那个按钮或标签的文本，换成我们刚刚选中的文件名。

$('input[type="file"]').change(function (event) {
    var that = this;
    var file = $(that)[0].files[0];
    if(file){
        $(that).prev().text(that.files[0].name);
        $(that).attr({ 'src': window.URL.createObjectURL(that.files[0]) });
    }
});

加了这段Ja vaScript代码之后，效果就直观多了。选中文件，按钮上的文字立刻变成了文件名，用户心里也踏实了。

Amaze UI 文件选择域的示例代码

当然，需求总是在进化。如果用户上传的是图片，他们很可能希望在点击“确定”前，先预览一下效果。这个想法很合理，实现起来也不复杂。

我们可以再增加一段交互代码：当鼠标悬停在文件选择区域上方时，动态生成一个浮层，展示刚刚选中的图片缩略图。

$('input[type="file"]').closest('div').hover(function(){
    if($(this).find('input[type="file"]').attr('src')){
        $('body').append('')
             }
},function(){
    $('.imgView').remove();
});