ansaurus

Question

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

Answer 1

A:

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!

bpeterson76 2010-07-19 14:46:30

Answer 2

+1 A:

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"&gt;&lt;/script&gt;
  <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.

Peter Bailey 2010-07-19 14:49:49

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.

Ty W 2010-07-19 15:11:29

File inputs fields are perfectly readable - just not writable.

Peter Bailey 2010-07-19 15:21:11

Answer 3

+1 A:

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/

Peter Forss 2010-07-19 15:08:54

ansaurus

tags:

views:

answers:

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

related questions