jQuery: how to get "value" of file upload input field_问答_开发者

jQuery: how to get "value" of file upload input field

开发者 https://www.devze.com 2023-01-07 18:04 出处：网络

Is it possible to determine if the user has selected a file for a particular input type=\"file\" field using javascript/jQuery?

Is it possible to determine if the user has selected a file for a particular input type="file" field using javascript/jQuery?

I have developed a custom fieldty开发者_高级运维pe 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.

Yes - you can read the value and even bind to the change event if you want.

<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.

This code will remove all the empty file inputs from the form and then submit it:

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/

This uploader has worked really well for my purposes: 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.

The resize is a pretty nice feature too, if you need it!