从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别

首先，说一下 input file 标签：

input file 标签通常用于上传文件。它有一个 value 属性，表示选择上传文件的路径。但是，由于安全原因，浏览器并不支持设置 input file 的 value 属性，只支持读取 value 属性。因此，如果想要重置 input file，val() 和 attr() 方法的表现会有所不同。

接下来，我们分别来看一下 val() 方法和 attr("value") 方法的使用：

一、使用 val() 方法

在 jQuery 中，val() 方法可以用于获取或设置表单元素的值。对于 input file 标签来说，由于安全限制，使用 val() 方法设置 value 属性是无效的。但是可以使用这个方法来获取 value 的属性值。

如果我们想要将 input file 重置为默认状态，可以在其他地方先将 input file 的父节点删除，再重新创建一个同样的节点。此时，由于创建的是新节点，节点中 value 属性的初始值会被自动添加。代码示例如下：

$(document).on('click', '#resetBtn', function () { 
    //移除节点
    $('#fileUpload').parent().remove(); 
    //重新创建节点
    $('<input type="file" id="fileUpload" name="fileUpload"/>').appendTo('#fileUploadContainer');
})

二、使用 attr("value") 方法

attr("value") 方法用于获取或设置 value 属性的值。但是，在使用 attr("value") 方法设置 input file 的 value 属性时，与 val() 方法不同，实际上并没有真正改变 input file 的 value 属性，只是修改了该属性的初始值。因此，在 reset 操作时，attr("value") 方法并无效果，浏览器会继续读取 input file 的原始值。

综上所述，我们可以通过 val() 方法来重置 input file 标签，而不能通过 attr("value") 方法来实现。