如何通过自定义代码在wordpress中上传图片

Question

我想通过前端上传图片并通过自定义代码使用 wordpress 媒体上传器上传图片，我希望结果即时显示图片

<div>
                            <label for="image_url">Picture:</label>
                           <img src="" id="img_url23"/>
                            <input type="hidden" name="image_url" id="image_url" class="regular-text" value="">
                            <input type="button" name="upload-btn" id="upload-btn" class="button-secondary" value="Upload Image">

                        </div>

Answer 1

 <?php
                      wp_enqueue_script('jquery');
                      wp_enqueue_media();//enqueue these default wordpress file

                            ?>
        <div>
                                <label for="image_url">Picture:</label>
  <img scr="" id="image_url2">//for show instant image
                                <input type="hidden" name="image_url2" id="image_url_2" class="regular-text" value="">
                                <input type="button" name="upload-btn" id="upload-btn-2" class="button-secondary" value="Upload Image">

        </div>

---------------------------------javascript-------------------------------

    $('#upload-btn-2').click(function(e) {
                                    e.preventDefault();
                                    var image = wp.media({ 
                                        title: 'Upload Image',
                                        // mutiple: true if you want to upload multiple files at once
                                        multiple: false
                                    }).open()
                                    .on('select', function(e){
                                        // This will return the selected image from the Media Uploader, the result is an object
                                        var uploaded_image = image.state().get('selection').first();
                                        // We convert uploaded_image to a JSON object to make accessing it easier
                                        // Output to the console uploaded_image
                                        console.log(uploaded_image);
                                        var image_url = uploaded_image.toJSON().url;
                                        // Let's assign the url value to the input field
                                        $('#image_url_2').val(image_url);
                                        $('#image_url2').attr('src',image_url);

                                    });
                                });