html 选择文件样式,选择文件按钮的样式《 HTML5：文件 API 》

File 类型的 input 元素很难去为它添加样式，就是这个选择文件的表单元素 … 不过还是有一些方法可以试一下 … 我们不直接去为它添加样式 .. 而是使用一个按钮代替它 …

这个替代的按钮可以使用 标签或者 标签 … 然后把真正的选择文件的表单元素隐藏起来 .. 下面我们使用一个 标签的按钮作为这个选择文件按钮的替身　…

选择文件

在上面使用了两个来自 Bootstrap 的 CSS 类 … 它们可以把这个 标签变成按钮的样式 .. 另外在上面我又定义了一个 selectbtn 这个 ID …

下面再去把这个选择文件的按钮隐藏起来 … style=“display:none” ...

然后我们可以使用点 JavaScript … 去监听替身按钮的点击事件 .. 事件发生以后，去执行 选择文件 的 click() 方法 …

这样点击这个 标签的替身，就相当于是点击了 选择文件 …

(#fileapi.js)

先找到替身按钮 … 然后去监听它的 click ，点击事件 … 事件发生以后，去执行一个函数 … 这个函数做的事儿就是去执行 选择文件 的 click() 方法 …

在前面的视频里，我们已经把找到的 选择文件 元素命名为了 fileSelect … 所以这里我们直接使用它 …

最后再防止 替身按钮，也就是 标签的点击事件的默认的行为 …

// 选择按钮

var selectbtn = document.getElementById("selectbtn");

selectbtn.addEventListener("click", function(event){

fileSelect.click();

event.preventDefault();

});

保存 … 在浏览器里预览一下 …

现在你看到的其实是用 标签做的选择文件的按钮 … 真正的选择文件按钮已经隐藏起来了 …

点击这个按钮 … 同样可以找到选择文件的窗口来选择文件 …