Question

是否可以使用javascript / jQuery确定用户是否为特定输入类型=“文件”字段选择了文件？

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

Answer 1

是的 - 您可以阅读该值，甚至可以绑定到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发布。

Answer 2

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

<强> 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/

Answer 3

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

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

如果你需要，调整大小也是一个非常好的功能！

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

3 个答案: