如何自定义<input type="file">? [英] How to customize <input type="file">?

查看:33
本文介绍了如何自定义<input type="file">?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

是否可以更改的外观?

推荐答案

您不能对 input[type=file] 控件本身进行太多修改.

You can’t modify much about the input[type=file] control itself.

由于单击与输入正确配对的 label 元素将激活/聚焦它,我们可以使用 label 来触发操作系统浏览对话框.

Since clicking a label element correctly paired with an input will activate/focus it, we can use a label to trigger the OS browse dialog.

这是你可以做到的...

Here is how you can do it…

label {
   cursor: pointer;
   /* Style as you please, it will become the visible UI component. */
}

#upload-photo {
   opacity: 0;
   position: absolute;
   z-index: -1;
}

<label for="upload-photo">Browse...</label>
<input type="file" name="photo" id="upload-photo" />

表单控件的 CSS 将使它看起来不可见并且不占用文档布局中的空间,但仍然存在所以它可以通过 label 激活.

The CSS for the form control will make it appear invisible and not take up space in the document layout, but will still exist so it can be activated via the label.

如果您想在选择后显示用户选择的路径,您可以使用 JavaScript 监听 change 事件,然后读取浏览器提供给您的路径(出于安全原因,它可以 向你撒谎关于确切路径).一种让最终用户看起来更漂亮的方法是简单地使用返回路径的基本名称(这样用户只需看到所选的文件名).

If you want to display the user’s chosen path after selection, you can listen for the change event with JavaScript and then read the path that the browser makes available to you (for security reasons it can lie to you about the exact path). A way to make it pretty for the end user is to simply use the base name of the path that is returned (so the user simply sees the chosen filename).

Tympanus 有一个 很棒的指南 用于设置样式.

There is a great guide by Tympanus for styling this.

这篇关于如何自定义&lt;input type="file"&gt;?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆