jQuery：如何获取文件上传输入字段的“值”答案

【问题标题】：jQuery: how to get "value" of file upload input fieldjQuery：如何获取文件上传输入字段的“值”
【发布时间】：2011-03-17 23:03:36
【问题描述】：

是否可以确定用户是否使用 javascript/jQuery 为特定输入 type="file" 字段选择了文件？

我为 ExpressionEngine（基于 PHP 的 CMS）开发了一个自定义字段类型，允许用户在 Amazon S3 上上传和存储他们的文件，但最流行的 EE 托管服务将 max_file_uploads 限制设置为 20。我想允许用户上传 20 个文件，再次编辑条目以添加 20 个等。不幸的是，在编辑条目时，最初的 20 个文件有一个“替换此图像”文件输入字段，这似乎消除了上传新图像的可能性。我想在提交表单时通过 javascript 删除所有未使用的文件输入字段。

【问题讨论】：

标签： php javascript jquery forms file-upload

【解决方案1】：

这个上传器非常适合我的目的：http://webdeveloperplus.com/jquery/ajax-multiple-file-upload-form-using-jquery/

使用它作为编码基础的好处是文件是异步上传的，因此一次无需限制为 20 个。在用户搜索时进行上传有明确的 UI 优势。

如果您需要，调整大小也是一个非常不错的功能！

【讨论】：

【解决方案2】：

是的 - 如果需要，您可以读取该值，甚至可以绑定到 change 事件。

<html>
<head>
  <title>Test Page</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
  $(function()
  {
    $('#tester').change( function()
    {
      console.log( $(this).val() );
    });
  });
  </script>
</head>

<body>

<input type="file" id="tester" />

</body>
</html>

但还有其他的多上传解决方案可能更适合您的需求，例如 bpeterson76 张贴。

【讨论】：

欣赏它。没想到 .val() 会在文件输入上返回任何内容，我想我应该尝试一下 :) 多次上传的东西与我这次想要去的方向不太一致，尽管通常我同意。再次感谢。
文件输入字段完全可读 - 只是不可写。

【解决方案3】：

此代码将从表单中删除所有空文件输入，然后提交：

HTML：

<form action="#">
  <input type="file" name="file1" /><br />
  <input type="file" name="file2" /><br />
  <input type="file" name="file3" /><br />
  <input type="file" name="file4" /><br />
  <input type="file" name="file5" /><br />

  <input type="submit" value="Submit" />
</form>

JavaScript：

$(function() {
  $("form").submit(function(){
    $("input:file", this).filter(function(){
      return ($(this).val().length == 0);
    }).remove();
  });
});

示例： http://jsbin.com/axuka3/

【讨论】：