jquery - 通过 ckfinder 上传后在页面上显示图像

Question

我正在使用 laravel 和 ckfinder 构建一个“创建帖子”页面，以允许用户上传特色图像。上传后是否可以在页面上显示图像？我使用了错误的代码，但当我在表单上使用 ckfinder 函数onclick'=>"openPopup()" 时，它无法正常工作。事实上，我需要 ckfinder 的响应来定义图像已上传以及在页面上显示图像的时间!

<input id="url" onclick="openPopup()" name="photo" type="text">


$("#url").on("change keydown keypress keyup mousedown click mouseup",function(){
       var photo_url = $("#url").val();
       var featured_image = $('#side-feature-img');

       featured_image.html('<img class="img-responsive" src="'+photo_url+'">');

   });

Answer 1

您可以通过监听 files:choose 和 file:choose:resized 事件来完成此操作。当用户使用“选择”或“选择调整大小”工具栏/上下文菜单选项选择文件时，会触发这些事件。

function openPopup() {
    CKFinder.popup( {
        // Configure CKFinder's popup size.
        width: 800,
        height: 500,
        // Enable file choose mechanism.
        chooseFiles: true,
        // Restrict user to choose only from Images resource type.
        resourceType: 'Images',
        // Add handler for events that are fired when user select's file.
        onInit: function( finder ) {
            // User selects original image.
            finder.on( 'files:choose', function( evt ) {
                // Get first file because user might select multiple files
                var file = evt.data.files.first();
                showUploadedImage( file.getUrl() )
            } );

            // User selects resized image.
            finder.on( 'file:choose:resizedImage', function( evt ) {
                showUploadedImage( evt.data.resizedUrl );
            } );
        }
    } );
}

function showUploadedImage( url ) {
    // Update field's value
    jQuery( '#url' ).val( url );

    // Show chosen image
    var img = jQuery( '<img>' ).attr( 'src', url );
    jQuery( '#side-feature-img' ).html( img );
}