jquery PHP image upload (using .post method)

Question

I am trying to upload images on a form but I am using Jquery .Post function in order to submit the data of the form. I get a PHP error of an undifined index. Here is a small portion of my code:

related HTML:

<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
Picture: <input name="uploadedfile" id="uploadedfile" type="file" />

related jQuery

    $.post("registerCB.php", {
    uploadedfile: $("#uploadedfile").val()
}

The PHP that handles the submission:

//file upload
        $uploadedfile= $_POST["uploadedfile"];



        /*--------------------Image Uploads-------------------------*/
        // Where the file is going to be placed 
        $target_path = "userImages/";

        /* Add the original filename to our target path.  
        Result is "uploads/filename.extension" */
        $target_path = $target_path . basename( $_FILES[$uploadedfile]['name']);

THE ERROR: enter image description here

CONCLUSION: I think the issue is the .val() on the image input. I did an alert on that element and it would only alert the file name NOT the entire path.

How can I get the entire path?

ONE MORE THING---- I would like to control the NAME of the file. So no matter what the user uploads I can control the name....is this possible?

THANKS!!!

I am not 100% sure, but $("#uploadedfile").val() should return file name, not file data. — neworld
– neworld, Commented Oct 9, 2011 at 16:44

erenon · Accepted Answer · 2011-10-09 16:44:31Z

1

You should read the PHP documentation about file uploading using POST.

answered Oct 9, 2011 at 16:44

erenon

19.2k2 gold badges65 silver badges97 bronze badges

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

Comments

japrescott · Accepted Answer · 2011-10-09 18:16:05Z

1

you cant read the value of <input type='data'/> and then post some information via jQuery. you need to post the form via jQuery the <input type='data'> is within!

<form type='post' id='myForm' enctype="multipart/form-data">
<input type='file' name='uploadedFile'/>
</form>


$("myForm").attr("action", "registerCB.php").submit();

and about the reading of the data via php, I would refer to the php.net article

edited Oct 9, 2011 at 18:16

answered Oct 9, 2011 at 17:05

japrescott

5,0633 gold badges29 silver badges38 bronze badges

1 Comment

erenon Over a year ago

The form should have an enctype="multipart/form-data" attribute.

dmck · Accepted Answer · 2011-10-09 16:45:15Z

0

The browser does not include the full path for security reasons. And you can control the name of the file on the server.

If you want to upload asyncronously you should look at some of the existing jquery plugins such as:

http://www.uploadify.com/

or

http://www.phpletter.com/Demo/AjaxFileUpload-Demo/

answered Oct 9, 2011 at 16:45

dmck

7,8617 gold badges46 silver badges79 bronze badges

Comments

Nils Munch · Accepted Answer · 2012-11-13 09:17:44Z

0

For Target path you have to use the following:

$target_path = $target_path . basename( $_FILES['uploadedfile']['name']);

edited Nov 13, 2012 at 9:17

Nils Munch

8,85211 gold badges53 silver badges103 bronze badges

answered Oct 9, 2011 at 16:46

devtut

6974 silver badges17 bronze badges

Collectives™ on Stack Overflow

jquery PHP image upload (using .post method)

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related