input type=file文件选择

Posted 十月芬芳

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了input type=file文件选择相关的知识,希望对你有一定的参考价值。

1、本文所说的input type=file指的是type类型是fileinput元素,最简html代码如下:

<input type="file">

2、原生file input大小、按钮文字等UI自定义,原生的file input不收待见的另外一个原因是:长的丑还不好控制。

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

然而,此方法有一些不足:

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

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

    1. 点击自定义的漂亮按钮就是点击我们file控件;
    2. 没有尺寸控制不精确的问题;
    3. 没有不能响应hover态active态的问题;
    4. 我们的漂亮按钮甚至可以在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>

3、file类型控件的accept属性

input file类型控件有一个属性,名为accept, 可能有些小伙伴不太了解。可以用来指定浏览器接受的文件类型,也就是的那个我们打开系统的选择文件弹框的时候,默认界面中呈现的文件类型。例如:accept="image/jpeg",则界面中只有jpg图片,如下截图,同时,窗体右下方是“自定义文件”按钮:

建议使用:

accept="image/png, image/jpeg, image/gif, image/jpg"
 

以上是关于input type=file文件选择的主要内容,如果未能解决你的问题,请参考以下文章

HTML <input type='file'> 文件选择事件

js 实现 input type="file" 文件上传示例代码

HTML input type=file文件选择表单的汇总

如何通过从 input type='file' 中选择来设置多个视频文件的预览

html input type=file -- 从 iCloud 中选择一个文件

HTML input type=file文件选择表单的汇总