web-dev-qa-db-ja.com

Ajaxでwp_handle_uploadとmedia_handle_sideloadを使用する

私はフォームを処理するときにajaxでwp_handle_upload（）を使用する方法を見つけ出すのに苦労しています。ここでやっていることは、ユーザーがフロントエンドから投稿を編集できるようにするフォームを使用して、投稿の画像を変更するなどの操作を実行できるようにすることです。

エラーチェックを含めて、この関数をシンプルにするために、この関数の塊を省略します。

 // 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) {
   });
});

これを転送する際にエラーが発生した可能性がありますが、これは基本的に私がしていることです。では、なぜこれはうまくいきませんか。私は この答え を見ました。それは私がある種のajaxアップロードプラグインを使う必要があると言っていますアップロードを添付ファイルとして保存する方法私を伸ばしなさい！

uploadsajaxwp-handle-upload
1
Pollux Khafra

ブラウザのXMLHttpRequestオブジェクトを使ってファイルをアップロードすることは不可能なので、Ajaxでファイルをアップロードするのは少しトリッキーです。そのため、ある種のAjaxアップロードプラグインを使用する必要があります。

またwp_handle_upload()はあなたのコードで使用しているものではありませんそのmedia_handle_sideload()

  • wp_handle_upload() - ファイルのアップロードに使用します（入力ファイルフィールド）
  • media_handle_sideload() - リモートファイルのアップロードに使用されます（入力テキストフィールド）

これ に似た質問を見てください

2
Bainternet

実際には、ファイルをメディアライブラリにアップロードするのに、またはどこにいても、非常に簡単にajaxを使用できます。

Wordpressはそれ自身のajax「プラグイン」を持っているので他には必要ありません。

ただ使用する：

$ajaxurl = "<?php echo admin_url('admin-ajax.php');? >";

これにより、自分のfunctions.phpファイルにアップロード関数を構築し、それらをajaxで直接呼び出して、それらの関数や自分が行っているページとの間でデータを送受信したり、他の操作を実行したりできます。

私は完全なajaxビデオアップロードスクリプトを作成しました。これはビデオをページにすぐに表示し、そのビデオのフレームを取得してその画像のプレースホルダーとして使用し、その画像をアップロードします。

これはすべて素晴らしい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 );

これであなたが正しい道を辿ることを願っています:)

0
Hue Man