Question

I am running into one issue. I have a form which submits an article via $.ajax() the problem is that I am giving user option to upload file and I do not want the page to refresh, so I placed upload form inside the main form which submits article. It does seem I can’t nest forms.. and I also need the value of file in $_FILES array ..

Here is my HTML form:

<form action="/" id="upload-form">
    <fieldset>
        <p class="upload-result">
        <!-- result of upload goes here -->
        </p>
        <p class="upload-images">
            <label><?php _e('Upload Images','sofa'); ?></label><a href="" class="button-secondary img_add_upload"><?php _e('Upload Image','sofa'); ?></a><a href="" class="button-secondary img_add_url"><?php _e('Add Image URL','sofa'); ?></a>
        </p>
        <p class="upload-url">
            <input type="text" name="img_url" id="img_url" value="<?php _e('Enter URL of image here...','sofa'); ?>" /><a href="" class="button-secondary img_add"><?php _e('Add Image','sofa'); ?></a>
        </p>
        <p class="upload-file">
            <input type="file" id="async-upload" name="async-upload" size="47" /><a href="" class="button-secondary img_upload"><?php _e('Upload','sofa'); ?></a>
        </p>
        <ol class="upload-images-lib">
            <li></li>
        </ol><div class="clear"></div>
        <p class="upload-images-note"><?php printf(__('Click on image to view full size. To mark image as main/featured, add image then click on %s icon.','sofa'), '<img src="'.get_bloginfo('template_directory').'/img/box.png" alt="" />'); ?></p>
        <p class="upload-input">
            <label for="utitle"><?php _e('Title','sofa'); ?></label>
            <input type="text" name="utitle" id="utitle" value="" />
            <span><?php _e('Enter a good title that describes what you are publishing. Be creative!','sofa'); ?></span>
        </p>
        <p class="upload-input">
            <label for="cat"><?Php _e('Category','sofa'); ?></label>
            <?php wp_dropdown_categories('hide_empty=0'); ?>
        </p>
        <p class="upload-editor">
            <?php wp_editor( '', 'ucontent', $settings = array(
                'textarea_rows' => 8,
                'textarea_name' => 'ucontent'
            )); ?>
        </p>
        <p class="upload-input">
            <label for="utags"><?php _e('Tags','sofa'); ?></label>
            <input type="text" name="utags" id="utags" value="" />
            <span><?php _e('Enter a comme seperated list of tags that perfectly describe your post. e.g. funny, man, public','sofa'); ?></span>
        </p>
        <p class="upload-submit">
            <input type="submit" value="<?php _e('Publish','sofa'); ?>" class="gradient-link-normal" />
        </p>
    </fieldset>
</form>

The problem is with this part.

<p class="upload-file">
    <input type="file" id="async-upload" name="async-upload" size="47" /><a href="" class="button-secondary img_upload"><?php _e('Upload','sofa'); ?></a>
</p>

I want to process the file upload, when this is clicked and the PHP form, which does the file upload requires $_FILES array obviously.

I am not sure if this is possible. Any solution?

Answer 1

You need to use a jQuery plug-in to deal with the file upload, and deal with the remaining data from your from as you already do.

There are some ready-made plug-ins to perform the file upload:

valums ajax upload

jQuery Multiple File Upload Plugin

AjaxFileUpload

jQuery File Upload

You can find more at the jQuery’s plug-ins site.