jquery 获取input type file value 的值

在Web开发中，我们经常需要使用表单来上传文件。而在这个过程中，我们经常会遇到需要获取input type file的值的情况。本文将教会你如何使用jQuery来获取input type file的值。

下面是获取input type file值的整个流程：

第一步是通过点击按钮或其他方式选择文件。在HTML中，我们可以使用input元素来实现：

在上面的代码中，我们使用了input元素的type属性为“file”，这样就创建了一个文件选择框。

一旦我们选择了文件，我们可以通过JavaScript来显示文件名。我们可以在选择文件后，立即将文件名显示在页面上。为了实现这一点，我们需要编写一个事件处理函数，并在input元素上绑定该事件。

在上面的代码中，我们使用了jQuery的on方法来绑定change事件。当选择文件后，change事件将触发处理函数。在处理函数中，我们使用了val方法来获取input元素的值，然后使用split方法和pop方法来获取文件名，并将其显示在id为“fileName”的元素中。

最后一步是获取文件的值，也就是实际的文件内容。为了实现这一点，我们可以使用File API中的FileReader对象。

在上面的代码中，我们首先通过$(this)[0].files[0]来获取选择的文件。然后，我们创建了一个FileReader对象，并将其赋值给reader变量。接下来，我们将onload事件处理函数绑定到reader对象的onload属性上。当文件读取完成后，该事件处理函数将被调用。在事件处理函数中，我们使用e.target.result来获取文件的内容，并将其显示在id为“fileContents”的元素中。最后，我们通过调用reader对象的readAsText方法来读取文件内容。

下面是整个过程的完整代码：