WordPress 處理 front-end 文件上傳，考慮到安全性和易用性

問題描述

我正在尋找適應現有的 forum-like 插件，它沒有附加介質的功能。

該插件作為自定義帖子類型，因此將其作為將圖像附加到帖子的方式為”simple” 。

我只關心附加圖像而不是任何文件類型，但插件使用 wp_editor，因此解決方案應該以某種方式與之集成。只要解決方案能夠將圖像的縮略圖插入到 tinyMCE 文本區域，我就不會過分地創建一個 tinyMCE 按鈕。

請注意，我指的是我網站的 front-end，而不是管理區域。

在一個絕對理想的情況下，我想這種情況發生：

用户點擊「提問」
使用輸入他們的帖子詳細信息
用户單擊 tinyMCE 界面上的一個按鈕，類似於 StackExchange，要求用户上傳文件。
系統然後將 correctly-sized 縮略圖插入到 tinyMCE 文本區域，將文件縮小為縮略圖大小
點擊此圖片應提供與帖子中圖像附件相同的功能
用户可以再次單擊以插入新圖像
用户還可以根據需要從 tinyMCE textarea 中刪除圖像

但是，我很高興將 tinyMCE 按鈕設為外設 – 如果”file upload” 盒更容易，那沒關係。

我遇到了 this link，但是我總是擔心在 t’interwebs 上閲讀 WordPress 文章，因為我永遠不會太確定他們的安全性，也沒有任何想象力的 php 安全專家。

提前致謝，

最佳解決方案

我認為最簡單的方法是，因為您已經在使用 wp_editor 功能，就是將媒體按鈕包含在 WP_Editor 實例中 – 這樣您就可以使用本機功能，包括「插入後貼」按鈕免費。

這樣做顯然取決於您正在嘗試使用的插件。但是，這應該讓你開始。在頁面模板中包含這樣的代碼以顯示編輯器，您將在頁面上獲得一個編輯器。將其包含在表單中並處理結果是另一個不詳細的步驟。

// Define the global variable $post_id - this is used by the media uploader
// to attach uploads to a specific post (so that the uploader can see uploads
// attached to this post and not others)
global $post_id;
$post_id = $post->ID; // should be the ID of the new post created

// Now filter the list of tabs available in the media editor.
// Remove everything but the "From Computer" option.

add_filter( 'media_upload_tabs', 'wpse42068_remove_additional_tabs' );

function wpse42068_remove_additional_tabs( $_default_tabs ) {
    return array( 'type' => __('From Computer') );
}

// Now just include the WP_Editor. See
// http://codex.wordpress.org/Function_Reference/wp_editor
// for settings available
wp_editor( '', 'posteditor', array( 'media_buttons' => true ) );

定義帖子 ID 可能是關鍵部分，並且您如何執行此操作將取決於您的功能的邏輯。我會建議：

首先訪問此頁面時創建一個 auto-draft，並保存返回在全局 $ post_id 變量中的帖子 ID 。
然後在提交表單時保存具有相同 ID 的創建的帖子。

次佳解決方案

也許這不是您的理想解決方案，但值得一提。得到它的谷歌搜索，但不幸的是我忘了 url 。附件部分與 @goldenapples 文章中的附件類似。

這是基本的功能。

function attach_uploads($uploads,$post_id = 0){
    $files = rearrange($uploads);
    if($files[0]['name']==''){
        return false;
    }
    foreach($files as $file){
        $upload_file = wp_handle_upload( $file, array('test_form' => false) );
        $attachment = array(
        'post_mime_type' => $upload_file['type'],
        'post_title' => preg_replace('/.[^.]+$/', '', basename($upload_file['file'])),
        'post_content' => '',
        'post_status' => 'inherit'
    );
        $attach_id = wp_insert_attachment( $attachment, $upload_file['file'], $post_id );
        $attach_array[] = $attach_id;
        require_once(ABSPATH . 'wp-admin/includes/image.php');
        $attach_data = wp_generate_attachment_metadata( $attach_id, $upload_file['file'] );
        wp_update_attachment_metadata( $attach_id, $attach_data );
    }
    return $attach_array;
}

ajax 功能

add_action('wp_ajax_attach_file', 'process_attach_file');
function process_attach_file() {

    // add some filter and validation on the id and the files here
    $post_id = $_POST['post_id'];
    $files = $_FILES['profile-picture'];

    // insert attachment
    $attached_files = attach_uploads($files,$post_id);

    // set the first file as post thumbnail
    if($attached_files){
        set_post_thumbnail( $post_id, $attached_files[0] );
    }

    // now all you have to do is set the response data

}

標記

<form id="upload-form" action="<?php echo admin_url('admin-ajax.php'); ?>" method="post" class="form" enctype="multipart/form-data" >
    <label for="profile-picture">Foto Profil</label>
    <input type="file" id="profile-picture" name="profile-picture[]" size="40" multiple />
    <?php wp_nonce_field( // intention nonce); ?>
    <input name="action" value="attach_file" type="hidden">
    <input name="post_id" value="12" type="hidden">
</form>

希望這個幫助

參考文獻

Handling front-end file uploads, considering safety and ease of use

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

WordPress 處理 front-end 文件上傳，考慮到安全性和易用性