logo标签列表

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

phpjavascriptjqueryformsfile-upload
12

是否可以使用JavaScript / jQuery确定用户是否选择了特定input type =“file”字段的文件？

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

3个回答
19

是的，你可以读取该值，甚至可以绑定到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()会在文件输入时返回任何内容，我猜我应该试一下 :) 尽管通常我会同意多上传的东西不太符合我这次想要走的方向。再次感谢。 - Ty W
文件输入字段非常易读 - 只是不可写。 - Peter Bailey
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();
  });
});

Example: http://jsbin.com/axuka3/

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接