WordPress管理面板中的簡單上傳表單字段

Question

根據Nicolas Kuttler的Simple upload field for WordPress，可以創建自定義上傳表單字段。但是，引入的代碼只是功能。我想知道如何使用它。

有人可以提供一個工作的例子嗎？如果代碼提供上傳文件的功能，則代碼是否屬於該頁面並不重要。我希望能夠通過管理面板上傳文件。

[編輯]

我要上傳的文件，除了圖像，包括文本文件和XML。另外我想實現它沒有JavaScript。目前尚未發佈有效答案。 （雖然我欣賞發佈的信息作爲答案）

在此先感謝。

---

建議的sample plugin不允許用戶與上傳框交互。我附上了下面的截圖。

Answer 1

添加所有的代碼到functions.php文件。 然後在您想要的主題文件中進行函數調用。例如，如果你在頁面模板要

，撥打電話

<div> <?php fileupload('form'); ?> </div> 

Answer 2

誰想要了解更多有關文件上傳，這裏有一個快速入門涵蓋的主要議題和痛點。這是用WordPress 3.0寫在一個Linux的盒子裏，代碼只是一個概念的基本概述 - 我確信這裏的一些人可以提供改進建議。 概述您的基本方法

至少有三種方法將圖像與帖子相關聯：使用post_meta字段存儲圖像路徑，使用post_meta字段存儲圖像的媒體庫ID（稍後會介紹）或分配將圖像作爲附件發佈到帖子中。此示例將使用post_meta字段來存儲圖像的媒體庫ID。因人而異。 多部分編碼

默認情況下，WordPress'創建&編輯表單沒有enctype。如果你想上傳一個文件，你需要在表單標籤中添加一個「enctype ='multipart/form-data'」，否則$ _FILES集合根本不會被推送。在WordPress 3.0中，有一個鉤子。在一些以前的版本中（不確定具體情況），你必須將字符串替換爲表單標籤。

function xxxx_add_edit_form_multipart_encoding() 
{ 

echo ' enctype="multipart/form-data"'; 

} 
add_action('post_edit_form_tag', 'xxxx_add_edit_form_multipart_encoding'); 

創建元盒，並上傳現場

我不會走多遠進入創造元盒，因爲大多數的你可能已經知道該怎麼做，但我只想說，你只需要一個帶有文件字段的簡單元框。在下面的示例中，我包含了一些代碼來查找現有圖像，並在存在的情況下顯示它。我還包括一些簡單的錯誤/反饋功能，可以使用post_meta字段傳遞錯誤。您需要將其更改爲使用WP_Error類...它僅用於演示。

// If there is an existing image, show it 
    if($existing_image) { 

     echo '<div>Attached Image ID: ' . $existing_image . '</div>'; 

    } 

    echo 'Upload an image: <input type="file" name="xxxx_image" id="xxxx_image" />'; 

    // See if there's a status message to display (we're using this to show errors during the upload process, though we should probably be using the WP_error class) 
    $status_message = get_post_meta($post->ID,'_xxxx_attached_image_upload_feedback', true); 

    // Show an error message if there is one 
    if($status_message) { 

     echo '<div class="upload_status_message">'; 
      echo $status_message; 
     echo '</div>'; 

    } 

    // Put in a hidden flag. This helps differentiate between manual saves and auto-saves (in auto-saves, the file wouldn't be passed). 
    echo '<input type="hidden" name="xxxx_manual_save_flag" value="true" />'; 

} 



function xxxx_setup_meta_boxes() { 

    // Add the box to a particular custom content type page 
    add_meta_box('xxxx_image_box', 'Upload Image', 'xxxx_render_image_attachment_box', 'post', 'normal', 'high'); 

} 
add_action('admin_init','xxxx_setup_meta_boxes'); 

處理文件上傳

這是一個大的 - 通過鉤住save_post行動實際處理文件上傳。我在下面列出了一個重要的評論函數，但是我想說明它使用的兩個關鍵WordPress功能：

wp_handle_upload（）完成處理上傳的所有魔法。您只需將它傳遞給$ _FILES數組中的字段引用以及一系列選項（不要太擔心這些 - 您需要設置的唯一重要信息是test_form = false。請相信我）。但是，此功能不會將上傳的文件添加到媒體庫。它只是上傳並返回新文件的路徑（並且，也是，完整的URL也是如此）。如果有問題，它會返回一個錯誤。

wp_insert_attachment（）將圖像添加到媒體庫，並生成所有適當的縮略圖。您只需向它剛剛上傳的文件傳遞一組選項（標題，發佈狀態等）和LOCAL路徑（而不是URL）即可。將圖片放入媒體庫的好處是，您可以稍後通過調用wp_delete_attachment並將其項目的媒體庫ID（我在下面的函數中進行處理）傳遞給它，從而輕鬆刪除所有文件。使用此功能，您還需要使用wp_generate_attachment_metadata（）和wp_update_attachment_metadata（），它們完全符合您的期望 - 爲媒體項目生成元數據。

function xxxx_update_post($post_id, $post) { 

    // Get the post type. Since this function will run for ALL post saves (no matter what post type), we need to know this. 
    // It's also important to note that the save_post action can runs multiple times on every post save, so you need to check and make sure the 
    // post type in the passed object isn't "revision" 
    $post_type = $post->post_type; 

    // Make sure our flag is in there, otherwise it's an autosave and we should bail. 
    if($post_id && isset($_POST['xxxx_manual_save_flag'])) { 

     // Logic to handle specific post types 
     switch($post_type) { 

      // If this is a post. You can change this case to reflect your custom post slug 
      case 'post': 

       // HANDLE THE FILE UPLOAD 

       // If the upload field has a file in it 
       if(isset($_FILES['xxxx_image']) && ($_FILES['xxxx_image']['size'] > 0)) { 

        // Get the type of the uploaded file. This is returned as "type/extension" 
        $arr_file_type = wp_check_filetype(basename($_FILES['xxxx_image']['name'])); 
        $uploaded_file_type = $arr_file_type['type']; 

        // Set an array containing a list of acceptable formats 
        $allowed_file_types = array('image/jpg','image/jpeg','image/gif','image/png'); 

        // If the uploaded file is the right format 
        if(in_array($uploaded_file_type, $allowed_file_types)) { 

         // Options array for the wp_handle_upload function. 'test_upload' => false 
         $upload_overrides = array('test_form' => false); 

         // Handle the upload using WP's wp_handle_upload function. Takes the posted file and an options array 
         $uploaded_file = wp_handle_upload($_FILES['xxxx_image'], $upload_overrides); 

         // If the wp_handle_upload call returned a local path for the image 
         if(isset($uploaded_file['file'])) { 

          // The wp_insert_attachment function needs the literal system path, which was passed back from wp_handle_upload 
          $file_name_and_location = $uploaded_file['file']; 

          // Generate a title for the image that'll be used in the media library 
          $file_title_for_media_library = 'your title here'; 

          // Set up options array to add this file as an attachment 
          $attachment = array(
           'post_mime_type' => $uploaded_file_type, 
           'post_title' => 'Uploaded image ' . addslashes($file_title_for_media_library), 
           'post_content' => '', 
           'post_status' => 'inherit' 
          ); 

          // Run the wp_insert_attachment function. This adds the file to the media library and generates the thumbnails. If you wanted to attch this image to a post, you could pass the post id as a third param and it'd magically happen. 
          $attach_id = wp_insert_attachment($attachment, $file_name_and_location); 
          require_once(ABSPATH . "wp-admin" . '/includes/image.php'); 
          $attach_data = wp_generate_attachment_metadata($attach_id, $file_name_and_location); 
          wp_update_attachment_metadata($attach_id, $attach_data); 

          // Before we update the post meta, trash any previously uploaded image for this post. 
          // You might not want this behavior, depending on how you're using the uploaded images. 
          $existing_uploaded_image = (int) get_post_meta($post_id,'_xxxx_attached_image', true); 
          if(is_numeric($existing_uploaded_image)) { 
           wp_delete_attachment($existing_uploaded_image); 
          } 

          // Now, update the post meta to associate the new image with the post 
          update_post_meta($post_id,'_xxxx_attached_image',$attach_id); 

          // Set the feedback flag to false, since the upload was successful 
          $upload_feedback = false; 


         } else { // wp_handle_upload returned some kind of error. the return does contain error details, so you can use it here if you want. 

          $upload_feedback = 'There was a problem with your upload.'; 
          update_post_meta($post_id,'_xxxx_attached_image',$attach_id); 

         } 

        } else { // wrong file type 

         $upload_feedback = 'Please upload only image files (jpg, gif or png).'; 
         update_post_meta($post_id,'_xxxx_attached_image',$attach_id); 

        } 

       } else { // No file was passed 

        $upload_feedback = false; 

       } 

       // Update the post meta with any feedback 
       update_post_meta($post_id,'_xxxx_attached_image_upload_feedback',$upload_feedback); 

      break; 

      default: 

     } // End switch 

    return; 

} // End if manual save flag 

    return; 

} 
add_action('save_post','xxxx_update_post',1,2); 

權限，所有權和安全

如果你有麻煩上傳，它可能有操作權限。我不是服務器配置方面的專家，所以如果這部分不合適，請糾正我。

首先，確保您的wp-content/uploads文件夾存在，並且歸屬於apache：apache。如果是這樣，你應該能夠將權限設置爲744，並且所有內容都可以正常工作。所有權是很重要的 - 即使設置777的燙髮有時也無濟於事，如果目錄沒有適當的擁有。

您還應該考慮限制使用htaccess文件上傳和執行的文件類型。這可以防止人們上傳不是圖像的文件，也不會執行僞裝成圖像的腳本。你或許應該google一下了解更權威的信息，但你可以做簡單的文件類型限制這樣的：

<Files ^(*.jpeg|*.jpg|*.png|*.gif)> 
order deny,allow 
deny from all 
</Files>