在前端开发中，经常需要使用表单元素来上传文件。而在jQuery中，我们通常会使用<input type="file">元素来实现这一功能。但是，当用户选择文件后，如何在页面中显示该文件信息呢？这就需要用到onChange事件。
onChange事件简介
onChange事件是HTML中常见的事件之一，它可以在用户修改表单元素的值时触发。例如，在一个文本框中输入文字、选择下拉列表项或者选择文件等都可以触发该事件。当用户选择了一个文件后，我们就可以通过该事件来获取文件信息并进行相应的操作。
处理OnChange事件
当用户选择文件后，我们可以通过以下代码来获取该文件的信息：
$('input[type=file]').change(function(){
var file = this.files[0];
console.log(file.name); // 获取文件名
console.log(file.size); // 获取文件大小
console.log(file.type); // 获取文件类型
});上述代码中，我们使用了jQuery的change()方法来绑定onChange事件。当用户选择文件后，就可以通过this.files[0]来获取该文件的信息。其中，files属性是一个包含了所选文件（如果有）的FileList对象，而[0]表示选择的第一个文件。
接下来，我们可以使用name、size和type属性来获取文件的名称、大小和类型等信息。通过这些信息，我们可以进行相应的操作，如显示文件名称、大小等。
示例代码
下面是一个简单的例子。在该例子中，我们通过onChange事件获取文件信息，并将文件名称和大小显示在页面上：
-- -------------------- ---- -------
--------- -----
------
------
----------------------------------------
------- ----------------------------------------------------------------------------
-------
------
------ ------------
-- ------------------
-- ------------------
--------
----------------------------------------
--- ---- - --------------
-------------------------- - -----------
--------------------------- - --------- - ------
---
---------
-------
-------当用户选择一个文件后，页面上就会显示该文件的名称和大小。我们可以根据需要扩展该示例，以实现更复杂的功能。
总结
在本文中，我们介绍了如何使用onChange事件来处理jQuery输入类型文件。通过获取文件信息，我们可以实现各种不同的功能，如上传文件、显示文件名称、大小等。希望本文能够对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24766