Passing a value using jQuery and php

Question

I want to pass the value of the file to catch php using jQuery. Is there a way to pass the value of the file to catch.php, so that var_dump($_FILES) will output somthing?

------index.php------------

<p>Name: <input type="text" name="name" id="name" /></p>
<p>Picture: <input type="file" name="pic" id="pic" />)</p>
<p><a href="#" id="submit" >POST</a></p>
<div id="result"></div>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$("#submit").click(function(){
    $.post(
       'catch.php',
       {name: $('#name').val(), pic: $('#pic').val()},
       function(result){
           $("#result").html(result);
       },
       "html"
    );
});
</script>

----------catch.php-----------------

<?php
var_dump($_POST);

var_dump($_FILES);
?>

Answer 1

You don't need jQuery for this - you just want a submit button on your form.

So:

<form action='catch.php' method='post' />

Answer 2

The javascript sandbox does not allow for uploading files with xhr. You can get around this limitation by submitting the form to a hidden iframe, but what you are trying to do simply won't work.

Answer 3

If you want to do a file upload - or just need the file name, cou can find some inforamtion about that at this link.

Answer 4

As an alternative, the YUI framework has an uploader component to solve this problem -- it uses the hidden iframe approach listed above but handles it for you transparently.