php - 如何从较大的表单中通过 jquery $.ajax 处理文件上传表单？

Question

我遇到了一个问题。我有一个通过 $.ajax() 提交文章的表单，问题是我给用户上传文件的选项，我不想刷新页面，所以我把上传表单放在提交文章的主要形式。看来我不能嵌套表格..而且我还需要 $_FILES 数组中的文件值..

这是我的 HTML 表单:

<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>

问题出在这部分。

<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>

我想处理文件上传，当点击它时，执行文件上传的 PHP 表单显然需要 $_FILES 数组。

我不确定这是否可行。有什么解决办法吗？

Answer 1

您需要使用 jQuery 插件来处理文件上传，并像您已经处理的那样处理来自您的剩余数据。

有一些现成的插件可以执行文件上传:

valums ajax upload

jQuery Multiple File Upload Plugin

AjaxFileUpload

jQuery File Upload

您可以在 jQuery 的插件站点找到更多信息。