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的插件站点找到更多信息。

Answer 2

在页面上的其他位置设置嵌套表单的最佳方法，只有在点击“上传”按钮时才会显示。

上传表单（小表单）我们最初是不可见的。您可以使用popup或jquery代码来显示。

<div id="smallform">
    <form name="upload">
        <input type="file" name="picture">
        <input type="submit" name="upload" value="Upload">
    </form>
</div>

<div id="largeform">
<form name="details">
    <input name="detail1">
    <input name="detail2">
     <a href="#" onclick="showSmallForm()">Upload file</a>
    <input type="submit">
</form>
</div>

函数showSmallForm（）会在点击上传时将小表单显示为更大的表单。

如何从更大的表单内部通过jquery $ .ajax处理文件上传表单？

2 个答案: