Question

我正在建立一个＆＃34;创建帖子＆＃34;使用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

You can do this by listening on files:choose and file:choose:resized events. Those events are fired when user select a file using "Choose" or "Choose resized" toolbar/context menu options.

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

Answer 2

当图片文件被选中时，它会在 id='preview_image' 的 div 中显示图片

<script src="library/ckfinder/ckfinder.js"type="text/javascript"></script>

<input class="depth" type="text" name="image" id="ckfinder-input-1">
<button id="ckfinder-popup-1">Select Image</button>

<script>
function selectFileWithCKFinder( elementId ) {
          CKFinder.config( {
            language: 'fa',
            defaultDisplayDate: false,
            defaultDisplayFileName: true,
            defaultDisplayFileSize: true,
            // remove modules toolbar
            removeModules : 'FilePreview',
            editImagePresets : false,
            editImageAdjustments : 'brightness,exposure,contrast,sharpen',
          } );
          
          CKFinder.popup( {
              chooseFiles: true,
              width: 1000,
              height: 600,
              language: 'fa',
              onInit: function( finder ) {
                  finder.on( 'files:choose', function( evt ) {
                      var file = evt.data.files.first();
                      var output = document.getElementById( elementId );
                      output.value = file.getUrl();
                      showUploadedImage( file.getUrl() );
                  } );

                  finder.on( 'file:choose:resizedImage', function( evt ) {
                      var output = document.getElementById( elementId );
                      output.value = evt.data.resizedUrl;
                      showUploadedImage( evt.data.resizedUrl );
                  } );
              }
          } );
          
          function showUploadedImage( url ) {
            // Show chosen image to div tag
            var img = jQuery( '<img width="100" height="100">' ).attr( 'src', url );
            jQuery( '#preview_image' ).html( img );
          }
      }

<div id="preview_image"></div>

ckfinder上传后在页面上显示图像

2 个答案: