input 打开文件夹事件委托

本文来自：http://www.zhangxinxu.com/wordpress/2015/11/html-input-type-file/

原生的file input不收待见的另外一个原因是：长的丑还不好控制。

举个例子，下图这个“选择文件”这几个文字，我们就不好对file控件动刀子实现自定义：

怎么办呢？

有一种方法是这样的：
让file类型的元素透明度0，覆盖在我们好看的按钮上。然后我们去点击好看的按钮，实际上点击是是file元素。

然而，此方法有一些不足：

尺寸控制不灵活。CSS width属性有些浏览器不管用，需要使用size，然后高度控制也不精准，我们很难正好覆盖在好看的自定义按钮上。
样式不好控制，按钮的hover态以及active态不好处理。
HTML结构限制以及定位成本。

更好的方法是，使用label元素与file控件关联，好处在于：

点击自定义的漂亮按钮就是点击我们file控件；
没有尺寸控制不精确的问题；
没有不能响应hover态active态的问题；

我们的漂亮按钮甚至可以在form表单元素的外面，例如：

<label class="ui_button ui_button_primary" for="xFile">上传文件</label>
<form><input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);"></form>

转载于:https://www.cnblogs.com/zhou195/p/7449549.html

input 打开文件夹事件委托相关推荐

VC++ 打开文件夹，保存文件等对话框的调用
2019独角兽企业重金招聘Python工程师标准>>> VC++ 打开文件夹,保存文件等对话框的调用一.打开文件夹: 1.CFileDialog实现 CFileDialog hFi ...
轻松玩转Python：打开文件夹，搜索视频文件，实现简单视频播放器
目录 1.功能描述: 2.具体实现: 3.代码实现: 4.执行效果: 1.功能描述: 这段代码实现了一个简单的视频播放器,可以打开指定的文件夹并搜索其中的视频文件,将搜索结果展示在列表框中,用户可以选 ...
c语言实现自动打开文件夹,c语言打开文件(c语言文件打开方式代码)
1.2 文件的输入输出函数键盘.显示器.打印机.磁盘驱动器等逻辑设备, 其输入输出都可以通过文件管理的方法来完成.而在编程时使用最多的要算是磁盘文件, 因此. { printf(＂File ope ...
C# 打开文件夹FolderBrowserDialog与打开文件OpenFileDialog浅析
最近在开发时遇到了不同文件的打开方式,然后就总结了一下,希望能帮到刷到的你在C# 中对话框的有很多种: 1:文件对话框(FileDialog) 它又常用到两个:打开文件对话框(OpenFileDia ...
C++打开文件夹对话框之BROWSEINFO
头文件 #include <shlobj.h> #include <windows.h> #include <stdio.h> using namespace st ...
Linux中如何用命令打开文件夹
Linux中如何用命令打开文件夹文章目录: 一.点击Linux桌面文件图标打不开二.解决方式三.杀死所有nautilus相关进程你是否遇到过Linux桌面文件图标打不开,我就遇到过,此时我的眼 ...
ubuntu设置鼠标单击打开文件夹或者文件
一般是默认是双击打开文件(夹),但在linux下,单击更爽! ubuntu设置鼠标单击打开文件夹或者文件,这样可以减少按鼠标的次数,让你的鼠标用得更久.试试吧!挺实用的哦!单击一下就能打开文件或者文件 ...
[Linux]Ubuntu 以管理员权限打开文件夹
方法一:(亲测可用) 此操作适合于文件夹有小锁,在root文件夹下操作等. ubuntu 以管理员权限打开文件夹: 1,右键->在终端打开 2, 在终端中直接输入sudo nautilus ...
linux终端如何打开文件夹,如何从终端打开文件夹(带GUI)？
问题描述我想在我的统一面板(ubuntu 12.10)中放置一个链接/快捷方式/启动器. 我在handytutorial.com上按照this tutorial创建了一个自定义启动器并将其拖到面板上 ...

input 打开文件夹事件委托

input 打开文件夹事件委托相关推荐

最新文章

热门文章