在AJAX中使用wp_Handle_Upload和media_Handle_sideload

时间:2012-11-29 作者:Pollux Khafra

在处理表单时,我很难弄清楚如何将wp\\u handle\\u upload()与ajax结合使用。我在这里所做的是使用一个表单,允许用户从前端编辑帖子,这样他们可以做一些事情,比如更改帖子的图像,这样我们就可以从这里开始了。

为了保持简单,我将省略这个函数的部分,包括错误检查。

 // Process the edit form
 add_action(\'wp_ajax_process_edit_form\', \'process_edit_form\');  
 function process_edit_form() {

    require_once(ABSPATH . "wp-admin" . \'/includes/image.php\');
    require_once(ABSPATH . "wp-admin" . \'/includes/file.php\');
    require_once(ABSPATH . "wp-admin" . \'/includes/media.php\');

    $image_file = $_POST[\'imageFile\'];
    $image_file_name = $_POST[\'imageFileName\']; 

    $post_to_edit = get_post($_POST[\'postId\']);

    // Set Image File
    if ($image_file["size"] > 0) {
        $cover_art_id = media_handle_sideload( $album_cover, $pid );
        wp_set_object_terms( $cover_art_id, \'cover_art\', \'category\');
        update_post_meta($pid,\'music_art\',$cover_art_id);
    } 


 }
和基本html表单

<form enctype="multipart/form-data">
  <input type="file" name="image_file" id="image_file" />
  <input type="submit" value="Save Changes" tabindex="6" id="submit" name="submit" data-id="<?php echo $post->ID; ?>" />
</form>
现在是一些jquery。请注意,这个jquery的脚本已经本地化,表单中的所有其他内容都可以使用我的方法正常工作。唯一不起作用的是提交时上传文件。

$(document).on("click","#submit", function(e) {
    e.preventDefault();
    $this = $(this);
    postId = $this.data("id");
    imageFile = $this.closest("form").find("#image_file").val();
    if (imageFile != "") {
      imageFileName = $this.closest("form").find("#image_file").val().split(\'\\\\\').pop();
    } else {
      imageFileName = "none";       
            };    
   data = {
      action: \'process_edit_form\',
      postId : postId,
      imageFile : imageFile,
      imageFileName : imageFileName
   };
   $.post(ajaxurl, data, function (response) {
   });
});
我可能会在传输时出错,但这基本上就是我正在做的。那么,为什么这不起作用呢?我看到了this answer 也就是说,我需要使用某种类型的ajax上传插件,但如果我不了解如何使用它们将上传保存为附件,我希望不用它。纠正我!

2 个回复
最合适的回答,由SO网友:Bainternet 整理而成

在ajax中上载文件有点棘手,因为无法使用浏览器的XMLHttpRequest对象上载文件,所以需要使用某种ajax上载插件。

而且wp_handle_upload() 您在代码中使用的不是media_handle_sideload()

  • wp_handle_upload() - 应用于文件上载(输入文件字段)
  • media_handle_sideload() - 应用于远程文件上传(输入文本字段)
看看这个similar question

SO网友:Hue Man

实际上,使用ajax将文件上传到媒体库或任何您想上传的地方都很容易!

Wordpress有自己的ajax“插件”,因此不需要其他插件。

只需使用:

$ajaxurl = "<?php echo admin_url(\'admin-ajax.php\');? >";
这允许您在函数中构建上载函数。php文件,并使用ajax直接调用它们,在这些函数和页面之间发送和检索数据,以及执行其他操作。

我已经构建了一个完整的ajax视频上传脚本,它会立即在页面中显示视频,允许您抓取该视频的一帧作为其图像占位符,上传该图像,然后使用ffmpeg转换、调整大小和水印视频!

所有这些都是通过出色的ajax在幕后完成的!

下面是一个示例:

                var ajaxurl = "<?php echo admin_url(\'admin-ajax.php\'); ?>";
                var formData = new FormData();

                formData.append(\'$Parent_Post_ID\', $Parent_Post_ID;
                formData.append(\'$thevideo\', $thevideo);
                formData.append(\'action\', \'watermark\'); // action should be the name of the function you want to call in your functions.php

                $.ajax({
                    url: ajaxurl,
                    type: \'POST\',
                    data:formData,
                    cache: false,
                    //async: false,
                    processData: false, // Don\'t process the files
                    contentType: false, // Set content type to false as jQuery will tell the server its a query string request
                    success:function(data) {
                        //alert(data);
                        //data can consist of anything you want to retrieve from the process

                        var datarray = data.split(\',\');

                        $attach_id = datarray[0];
                        $whatever = datarray[1];
                        $whatever = datarray[2];


                        alert(\'All Done :)\');

                    } // END Ajax Success

                }); // END Ajax Request
在“上载”功能中,您可以轻松使用以下内容上载文件并检索附件id。

$attach_id = media_handle_upload($file_handler,$Parent_Post_ID );
希望这能让您走上正确的道路:)

结束

相关推荐

使用AJAX保存(更新)帖子/页面编辑

编辑帖子/页面时的一个主要挫折是,保存后会发生两件事:管理页面会被重新加载,这需要时间。更重要的是,如果您正在处理较长的帖子,尤其是在复制编辑时,或者如果在HTML模式下工作并在需要频繁预览的地方进行小的调整,则光标位置会丢失。如果丢失当前位置,那么找到您离开的位置将不必要地令人沮丧和耗时。解决这个问题的一个很好的方法是通过AJAX进行更新。事实上曾经有a plugin for this, 但它已经有5年多没有更新了,而且它不再适用于当前的WP版本。有没有(简单的)方法可以:修复该插件,或破解帖子。php