Xử lý tải lên tập tin mặt trước, xem xét an toàn và dễ sử dụng

Tôi đang tìm cách điều chỉnh một plugin giống như diễn đàn hiện có mà không có phương tiện để đính kèm phương tiện truyền thông.

Plugin hoạt động như một loại bài đăng tùy chỉnh, vì vậy nó sẽ "đơn giản" như đính kèm một hình ảnh vào bài viết.

Tôi chỉ quan tâm đến việc đính kèm hình ảnh chứ không phải bất kỳ loại tệp nào, nhưng plugin có sử dụng wp_editorvà do đó, giải pháp theo cách nào đó sẽ tích hợp với điều đó. Tôi không quá bận tâm về việc tạo nút tinyMCE, miễn là giải pháp có khả năng chèn hình thu nhỏ của hình ảnh vào textarea tinyMCE.

Xin lưu ý, tôi đang đề cập đến phần đầu của trang web của tôi chứ không phải là khu vực quản trị.

Trong một tình huống hoàn toàn lý tưởng, tôi muốn kịch bản này xảy ra:

• Người dùng nhấp vào "Đặt câu hỏi"
• Sử dụng nhập chi tiết bài viết của họ
• Người dùng nhấp vào nút trên giao diện tinyMCE, tương tự như StackExchange, yêu cầu người dùng tải lên một tệp.
• Sau đó, hệ thống sẽ chèn hình thu nhỏ có kích thước chính xác vào textarea tinyMCE, sau đó đã bẻ khóa tệp thành kích thước hình thu nhỏ này
• Nhấp vào hình ảnh này sẽ cung cấp chức năng tương tự như tệp đính kèm hình ảnh trong Bài đăng
• Sau đó, người dùng có thể nhấp lại để chèn hình ảnh mới
• Người dùng cũng có thể xóa hình ảnh khỏi textarea tinyMCE khi cần thiết

Tuy nhiên, tôi rất vui khi nút tinyMCE là thiết bị ngoại vi - nếu hộp "tải tệp lên" dễ dàng hơn đáng kể, điều đó tốt.

Tôi đã xem qua liên kết này nhưng tôi luôn e ngại khi đọc các bài viết về WordPress trên t'interwebs vì tôi không bao giờ quá chắc chắn về độ an toàn của chúng, tôi cũng không phải là chuyên gia bảo mật php bởi trí tưởng tượng.

Cảm ơn trước,

Tôi nghĩ cách dễ nhất, vì bạn đã sử dụng wp_editorchức năng này sẽ chỉ bao gồm các nút phương tiện trong ví dụ WP_Editor - theo cách này bạn sẽ có các chức năng gốc, bao gồm nút "Chèn vào bài", được tích hợp miễn phí.

Cách bạn làm điều này rõ ràng phụ thuộc vào plugin bạn đang cố gắng làm việc. Tuy nhiên, điều này sẽ giúp bạn bắt đầu. Bao gồm mã như thế này trong một mẫu trang để hiển thị trình chỉnh sửa và bạn sẽ có một trình chỉnh sửa trên trang của mình. Bao gồm điều này trong một hình thức và xử lý kết quả là một bước khác không chi tiết ở đây.

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

Xác định ID bài đăng có lẽ là phần quan trọng và cách bạn thực hiện điều này sẽ phụ thuộc vào logic chức năng của bạn. Tôi muốn đề nghị:

• Tạo bản nháp tự động khi truy cập trang này lần đầu tiên và lưu ID bài đăng được trả về trong biến $ post_id toàn cầu.
• Sau đó lưu bài đăng đã tạo với cùng ID đó khi biểu mẫu được gửi.

Có thể đây không phải là giải pháp lý tưởng của bạn, nhưng nó đáng để thử. Có nó bằng cách googling nhưng tiếc là tôi quên url. Phần đính kèm tương tự như phần trên bài viết @goldenapples.

Đây là chức năng cơ bản.

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;
}

Hàm 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

}

Đánh dấu

<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>

Hy vọng điều này giúp đỡ