现今，web开发中，上传文件的需求越来越多。对于这个需求，HTML5提供了一个input类型为file的表单元素来实现文件选择和上传的功能。本文就呈现了。

一、input type=file的基本属性

利用input type=file上传文件，首先要了解其基本属性。该表单元素主要被用于选择文件，需要设置一个name属性，以便服务器适当地处理上传的文件。同时，也可以使用accept属性指定可以选择的文件类型。

其他的表单属性，如value，readonly，disabled，onfocus，onblur等属性，除了value属性不能被设置以及修改之外，其它都可以用在input type=file元素中。对于value属性将在下一节中详述。

二、input type=file的文件选择

input type=file元素为选择文件提供了以下几种方式：

1.按钮模式

其中，通过display:none隐藏了input表单元素，将点击事件绑定到按钮上，当用户点击按钮时，将会自动调用点击事件，从而触发input表单元素的文件选择框。

2.任务栏模式

当用户点击按钮时，将打开文件选择框。选择后，表单元素会自动提交上传，不会出现额外的提交按钮。

三、 input type=file的文件获取

用户选择文件后，文件的路径以及文件名将被浏览器自动填充到input type=file元素的value属性中，但是为了保证安全性和用户体验，一般不可读不可写，所以开发人员就无法通过JavaScript直接获取到文件路径和文件名。但仍然有一种方式可以实现文件的获取。

1.通过表单提交实现文件获取

注意，其中enctype属性的值需要设置成multipart/form-data，这样才能将表单数据与文件一同提交到服务器端。利用这种方式，浏览器会将所选文件自动上传到指定的地址，后台处理文件时，只需要通过相应的输入流读取文件内容即可。

四、input type=file的注意事项

1. 文件类型和大小的限制

在input type=file元素中，通过accept属性以及文件大小校验两种方式来掌控文件的类型和大小。

注意其中的onchange事件，通过这个事件函数，可以对用户选择的照片进行判断，当判断为不合法时，需要给出相应的提示。

2.输入框的样式

input type=file元素的样式十分难以定制，因为不同的浏览器采用的文件选择框样式各不相同，所以很难得到统一的效果。

但是，我们可以通过CSS设置input type=file元素的宽度，以及让上传文件的输入框始终处于可见状态：

input[type=”file”]{

display: inline-block;

width: 250px;

height: 40px;

margin: 10px 0;

position: absolute;

opacity: 0;

font-size: 0;

}

三、总结

本文围绕展开，了解了input type=file的基本属性，文件选择，文件获取，以及注意事项。

上传输入框不仅可以做到文件上传，而且还可以让用户提交头像等等功能，可以说在web开发中使用的十分广泛。当然了，要想保证系统的安全性，提供人性化的文件上传体验，开发者对于此还需要多加钻研。

对于更多的内容，欢迎观看我的其它文章，并多多点赞噢！