Question

I desire to upload files asynchronous when the user select a file in a input file, with $.ajax. But the php that recive the call return index undefined.
The jquery code is the next:

$("#urlimatge").change(function(){
            var filename = $("#urlimatge").val();
            $.ajax({ 
                type: "POST",
                url: "utils/uploadtempimg.php",
                enctype: 'multipart/form-data',
                data: {'urlimatge' : filename },
                success: function(response){
                     alert(response);
                }
            }); 

        });

and the php that recibe the call:

$image =  new gestorimatges();
$target_path = $image->uploadTemp($_FILES['urlimatge']['name'],$_FILES['urlimatge']['tmp_name']);

Thanks

Answer 1

You can’t upload files with AJAX, but you can use an iframe so you don’t have to refresh the current page.

Many people go strait to plugins but you can do this yourself pretty easily, and with all the functionality of an AJAX request.

Instead of using an AJAX function, have a form submit to a hidden iframe that has a load event handler attached to it so when the form is submitted, you have a callback function that actually includes the server response (the HTML of the iframe after it loads).

Example:

HTML —

<form action="..." method="post" encrypt="application/x-www-form-urlencoded" target="workFrame" >
    <input type="file" name="file" />
    <input type="submit" />
</form>
<iframe id="workFrame" src="about:blank" style="display:none;"></iframe>

JS —

$(function () {
    $('form').on('submit', function () {
        //check if the form submission is valid, if so just let it submit
        //otherwise you could call `return false;` to stop the submission
    });

    $('#workFrame').on('load', function () {

        //get the response from the server
        var response = $(this).contents().find('body').html();

        //you can now access the server response in the `response` variable
        //this is the same as the success callback for a jQuery AJAX request
    });
});