Javascript jQuery：如何获取文件上传输入字段的“值”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3282080/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: how to get "value" of file upload input field
提问by Ty W
Is it possible to determine if the user has selected a file for a particular input type="file" field using javascript/jQuery?
是否可以使用 javascript/jQuery 确定用户是否已为特定输入类型 =“文件”字段选择了文件？
I have developed a custom fieldtype for ExpressionEngine (PHP-based CMS) that lets users upload and store their files on Amazon S3, but the most popular EE hosting service has set a max_file_uploads limit of 20. I'd like to allow the user to upload 20 files, edit the entry again to add 20 more, etc. Unfortunately upon editing the entry the initial 20 files have a "replace this image" file input field that appears to be knocking out the possibility of uploading new images. I'd like to remove any unused file input fields via javascript when the form is submitted.
我为 ExpressionEngine（基于 PHP 的 CMS）开发了一个自定义字段类型，它允许用户在 Amazon S3 上上传和存储他们的文件，但最流行的 EE 托管服务将 max_file_uploads 限制设置为 20。我想允许用户上传 20 个文件，再次编辑条目以添加 20 个，等等。不幸的是，在编辑条目时，最初的 20 个文件有一个“替换此图像”文件输入字段，这似乎消除了上传新图像的可能性。我想在提交表单时通过 javascript 删除任何未使用的文件输入字段。
回答by Peter Bailey
Yes - you can read the value and even bind to the changeevent if you want.
是的 - 您可以读取值，甚至可以根据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>
But there are other, multiple-upload solutions that might suit your needs better, such as bpeterson76 posted.
但是还有其他的多上传解决方案可能更适合您的需求，例如发布的 bpeterson76。
回答by Peter ?rneholm
This code will remove all the empty file inputs from the form and then submit it:
此代码将从表单中删除所有空文件输入，然后提交它：
HTML:
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:
JavaScript：
$(function() {
$("form").submit(function(){
$("input:file", this).filter(function(){
return ($(this).val().length == 0);
}).remove();
});
});
Example:http://jsbin.com/axuka3/
示例：http : //jsbin.com/axuka3/
回答by bpeterson76
This uploader has worked really well for my purposes: http://webdeveloperplus.com/jquery/ajax-multiple-file-upload-form-using-jquery/
这个上传器非常适合我的目的：http: //webdeveloperplus.com/jquery/ajax-multiple-file-upload-form-using-jquery/
The benefit to using it as a basis for your coding is that the files are uploaded asynchronously, so no need to limit to 20 at a time. There's a definite UI benefit to doing the upload while the user is searching.
使用它作为编码基础的好处是文件是异步上传的，因此一次不必限制为 20 个。在用户搜索时进行上传有明确的 UI 好处。
The resize is a pretty nice feature too, if you need it!
如果您需要，调整大小也是一个非常好的功能！
