Question

What I have is a form with details like name, address…and another separate upload profile pic form. And I want to get that (optional) uploaded picture when the “parent” (separate) form is submitted.
Right now they work like this:
Uploaded pic is sent through .ajaxSubmit() to process_uploaded_image.php. Then it gets processed, resized, and the new picture is made within a “dump/temp” folder. I could return it in success: function(data), in the form of data that could be the echoed $image_path_and_name or as an <img src="$image_path_and_name"/>. I made it this way – that, is having a temp image – since
(1) I want to let the user view what he just uploaded (remember I already have it returned path or img element to jquery and I could place it anywhere I want), and
(2) the uploaded image isn’t final, not until the “parent” form finalizes the registration. And it is still a temp image after all.

So, the problem is: I want to access that uploaded image, and “bring it along” with the “parent” form when it gets submitted…how can I do that exactly? Technically it isn’t a parent form, since I know a form within form is not allowed. But it is tied up and under that parent form logically. I would be thankful for any help, but if possible, I would appreciate it even more if you could consider my present scenario so I won’t have to start from scratch again. Thanks again.

My idea: (please let me know how feasible this is…and/or guideline on how I could do #1)
1. “reconstruct” or copy that file from ajax-jquery returned (data) of $image_path_and_name string or <img src="$image_path_and_name"/>, place it in final upload folder.<—THIS IS WHERE I’M STUMPED! I couldn’t just use move_uploaded_file(), can I?
2. Since, from this point everything’s final..I could save its file path to my database, along with other form info.

3. empty the dump/temp folder.

Answer 1

My solution is that using a iframe for upload, and using JavaScript like this in the return page of the iframe

echo("<script type=\"text/javascript\">parent.insert('". $WHAT_YOU_WANT . "');</script>");

and the function insert is defined in the parent page, and can insert the string into the where you want. obj_ta is the target textfield, or something else.

//A simple input
function insert(str) {
    obj_ta.value = str;
}

//A textfield which accept some other user inputs
function insert(str) {
var startPos = obj_ta.selectionStart,
    val = obj_ta.value;
obj_ta.value = val.substring(0, startPos) + str + val.substring(startPos, obj_ta.value.length);
}