Front-end Ajax File Upload

时间:2015-05-19 作者:Feel The Noise

我正在从事一个项目,注册用户可以将文件上传到特定的帖子类型。为了实现更流畅的导航,我使用Ajax制作了整个部分,因此页面永远不会重新加载<然而,我很难<input type="file"> 工作
以下是我目前的代码:

标记

<?php
    // Start Loop and current meta of the post
?>
<form class="update_post" method="post" accept-charset="utf-8" enctype="multipart/form-data">
    <input type="hidden" name="post_id" id="post_id" value="<?php echo get_the_ID(); ?>">
    <label for="new_value_1_for_<?php echo get_the_ID(); ?>">Value 1</label>
    <input type="text" name="new_value_1_for_<?php echo get_the_ID(); ?>" id="new_value_1_for_<?php echo get_the_ID(); ?>" value="" required>
    <label for="new_value_2_for_<?php echo get_the_ID(); ?>">Value 2</label>
    <input type="text" name="new_value_2_for_<?php echo get_the_ID(); ?>" id="new_value_2_for_<?php echo get_the_ID(); ?>" value="" required>
    <label for="file_upload_for_<?php echo get_the_ID(); ?>">File Upload</label>
    <input type="text" name="file_upload_for_<?php echo get_the_ID(); ?>" id="file_upload_for_<?php echo get_the_ID(); ?>" value="" required>
    <input type="submit" name="submit" class="button1 submit_update_post" value="Send">
    <div class="progress_bar"></div>    
</form>
<?php
    // End Loop
?>
jQuery
$(".update_post").submit(function(){
    var formData = new FormData(this);
    $.ajax({
        type: "POST",
        dataType: "json",
        url: "url_to_php_file",
        data: formData, 
        cache: false,
        contentType: false,
        processData: false,
        beforeSend: function(){
            // Show a loader animation
        },
        success: function(data) {
            // Hide the loader animation and update the info
        },
        error: function() {
            // Display error message
        }
    });
    return false;
});

php

$post_id = $_POST[\'post_id\'];
$value_1 = $_POST[\'new_value_1_for_\'.$post_id.\'\'];
$value_2 = $_POST[\'new_value_2_for_\'.$post_id.\'\'];

// Update the Post Meta
update_post_meta($post_id, \'value_1\', $value_1);
update_post_meta($post_id, \'value_2\', $value_2);

// Upload the file
$file_upload = wp_upload_bits($_FILES[\'file_upload_for_\'.$post_id.\'\'][\'name\'], null, file_get_contents($_FILES[\'file_upload_for_\'.$post_id.\'\'][\'tmp_name\']));
    if (isset($file_upload[\'error\']) && $file_upload[\'error\'] != 0) {
        echo \'<script type="text/javascript">
            alert("\' . $file_upload[\'error\'] .\'");
        </script>\';
        update_post_meta($post_id, \'file_upload\', "");
    }
    else {
        update_post_meta($post_id, \'file_upload\', $file_upload);
    }

$file_uploaded = get_post_meta($post_id, \'file_upload\', true );

// Output
$array = array(
    "value_1"       => $value_1,
    "value_2"       => $value_2,
    "file_url"      => $file_uploaded[\'url\'],
);

print json_encode($array);
除了上传文件外,其他一切都正常<有什么我遗漏的吗<非常感谢你。

1 个回复
SO网友:Valerii Vasyliev

我使用此代码上载

if ( ! function_exists( \'wp_handle_upload\' ) )  {

                    require_once( ABSPATH . \'wp-admin/includes/file.php\' );  
}

if($_FILES[\'file\'][\'name\'] != \'\') {

                         $uploadedfile = $_FILES[\'file\'];

                         $upload_overrides = array( \'test_form\' => false );

                         $movefile = wp_handle_upload( $uploadedfile, $upload_overrides );

                         if ( $movefile && ! isset( $movefile[\'error\'] ) ) {

                            $file_url = $movefile[\'url\'];

                            $file_url = $movefile[\'file\'];
                         } 
}
如果需要限制要下载的文件类型,则需要更改行

$upload_overrides = array( \'test_form\' => false);
在上

$mimes = [
            \'wmv\' => \'video/x-ms-wmv\',
            \'wmx\' => \'video/x-ms-wmx\',
            \'wm\' => \'video/x-ms-wm\',
            \'avi\' => \'video/avi\',
            \'divx\' => \'video/divx\',
            \'flv\' => \'video/x-flv\',
         ];


$upload_overrides = array( \'test_form\' => false, \'mimes\' => $mimes );
mime类型的完整列表

print_r(get_allowed_mime_types());

结束

相关推荐

放置用于AJAX回调的Add_action()?

这可能是一个很难回答的问题,但我很困惑。我创建了一个简单的WP模板页面。通过ajax回调将表单更新到db的表单。在底部,我放置了add\\u action()语句,以便在表单通过WP-AJAX提交时触发回调函数。我很快意识到回调函数(add\\u action()语句中的函数)没有启动。我的jQuery中“done”函数的响应代码是0。。。这意味着WP-AJAX无法挂接到回调函数。add_action(\'wp_ajax_updateuserprofileAction\', \'update