Why I am getting an error of undefined index I am using jquery ajax

Question

I don't why I am getting an error of undefined index. I think I properly send the value to php . Or Am I missing something in my code?

here's the jquery code I use:

$(function() {
            $('button').button();
            $('.update-profile-pic').click(function() {
                $('#dialog').dialog({
                    width:350,
                    modal:true,
                    buttons: {
                        'Upload': function() {
                            $.ajax({
                                url: 'upload-image.php',
                                method: 'post',
                                data: { uploadedfile: $('.profile-pic-name').val().trim() },
                                success: function(data) {
                                    $('.new-profile-pic').html(data);
                                }
                            });
                        }
                    }
                });
            });
        });

Here's my html code:

<button class="update-profile-pic">Update Profile Picture</button>
<div id="dialog">
    <p class="new-profile-pic">
        <!--Image should be here-->
    </p>
    <form enctype="multipart/form-data">
        <input type="hidden" name="MAX_FILE_SIZE" value="100000">
        <input class="profile-pic-name" name="uploadedfile" type="file">
    </form>
<div>

And here's my php code:

   <?php
$target_path = "uploads/";
$target_path = $target_path . basename( $_FILES['uploadedfile']['name']); 

if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
    echo '<img alt="" src="'.$target_path.'">';
} else{
    echo "There was an error uploading the file, please try again!";
}
?>

Here's the result of the firebug's console after I click the upload:

enter image description here

Here's the sample error ouput:

enter image description here

possible duplicate of [How can I upload files asynchronously with jQuery?](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery) — DCoder, Sep 23 '12 at 09:36
Using your browser debugging tool what line does the error occur in? When using Chrome for example, errors are listed with information in which file they occur and on which line and so on. I'm sure other browser's tools are similar. — Nope, Sep 23 '12 at 09:36
I use firebug in my response tab it says undefined index: uploadedfile — Brained Washed, Sep 23 '12 at 09:39

Denzil Sequeira · Answer 1 · 2012-09-23T10:04:33.163

2

Can you try the following

       success: function(data) {

         $('.new-profile-pic').html(data.uploadedfile);

          }

Have u checked the following it's similar to what you are looking for

http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html

edited Sep 23 '12 at 10:04

answered Sep 23 '12 at 09:56

Denzil Sequeira

129
3
7

score 1 · Answer 2 · answered Sep 23 '12 at 09:54

I could be wrong but since you're using Ajax I don't think your PHP code will be looking for the file in the $_FILE global. Instead, the data will be in $_POST global (it'll be JSON so you will have to json_decode() it first). All that is going to be there though is the name of the file and not the actual file. You'll need to create a new FormData object in your JavaScript file and pass it a reference to the file input.

score 1 · Answer 3 · answered Sep 23 '12 at 10:02

1

The reason this doesn't work is because you can't send files over AJAX. You will need to use a plugin or a hidden iFrame. See http://ramui.com/articles/ajax-file-upload-using-iframe.html for this.

answered Sep 23 '12 at 10:02

Elianora

194
1
13

score 0 · Answer 4 · answered Sep 23 '12 at 10:04

0

yeah @richoffrails as saying the file is not actually being uploading to the server check your $_FILES array for more info.

you can use this or many other are available for ajax file upload over the internet

http://www.uploadify.com/

answered Sep 23 '12 at 10:04

Ravi Soni

2,210
3
31
53

Why I am getting an error of undefined index I am using jquery ajax

4 Answers4