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

Question

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

Peter Bailey · Accepted Answer · 2010-07-19 14:49:49Z

19

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.

answered Jul 19, 2010 at 14:49

Peter Bailey

106k32 gold badges186 silver badges206 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ty W Over a year ago

appreciate it. didn't think that .val() would return anything on a file input, guess I should've just tried it :) the multiple-upload stuff isn't quite in line with the direction I want to go this time, though usually I'd agree. Thanks again.

Peter Bailey Over a year ago

File inputs fields are perfectly readable - just not writable.

Peter Örneholm · Accepted Answer · 2010-07-19 15:08:54Z

2

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/

answered Jul 19, 2010 at 15:08

Peter Örneholm

2,85820 silver badges24 bronze badges

Comments

bpeterson76 · Accepted Answer · 2010-07-19 14:46:30Z

0

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!

answered Jul 19, 2010 at 14:46

bpeterson76

12.9k6 gold badges51 silver badges82 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related