CKFinder如何在选择图像时获取尺寸URL和尺寸（宽度/高度）（文件：选择）？ [英] CKFinder how to get dimension URL and Dimension (width/height) when choosing an image (files:choose)?

问题描述

我正在使用CkFinder 3，在成功上传图像后，我需要能够在用户点击选择按钮后检测到：

I am using CkFinder 3, after uploading successfully an image I need to be able to detect after an User click the "Chose" button:

• 文件名/ ID


• url


• 原始图片的宽度和高度

目前我正在使用文件：选择但我无法在cb事件中找到此信息。

At the moment I am using the files:choose but I cannot find this information on the cb event.

任何想法如何解决？感谢代码示例。

Any idea how to solve it? A sample of code would be appreciate thanks.

    CKFinder.modal( {
        connectorPath: 'https://api.mysite.com/lib/ckfinder/core/connector/php/connector.php',
        resizeImages: false, 
        startupFolderExpanded: true,
        chooseFiles: true,
        width: 1000,
        height: 800,
        language: 'en',
        onInit: function( finder ) {
            finder.on( 'files:choose', function( evt ) {
            } );
        }
    } );

推荐答案

以 files：选择 事件描述。你得到 Backbone.Collection 用户在 evt.data.files 中选择的.cksource.com / ckfinder3 /＃！/ api / CKFinder.Models.File>文件。

Taking example from the files:choose event description. You get Backbone.Collection of files chosen by the user in evt.data.files.

棘手的部分是从 <$获取图像尺寸c $ c> ImageInfo 服务器（使用 命令：发送 请求）因为它需要使用promises处理异步代码。

The tricky part is to obtain image dimensions from ImageInfo server (using the command:send request) since it requires to process asynchronous code with promises.

假设您只允许上传图片，示例代码如下：

Assuming that you only allow Images to be uploaded, example code is below:

// Listen to event.
finder.on( 'files:choose', function( evt ) {
    // Iterate over the files collection.
    evt.data.files.forEach( function( file ) {
        // Send command to the server.
        finder.request( 'command:send', {
            name: 'ImageInfo',
            folder: file.get( 'folder' ),
            params: { fileName: file.get( 'name' ) }
        } ).done( function( response ) {
            // Process server response.
            if ( response.error ) {
                // Some error handling.
                return;
            }

            // Log image data:
            console.log( '-------------------' );
            console.log( 'Name:', file.get( 'name' ) );
            console.log( 'URL:', file.getUrl() );
            console.log( 'Dimensions:', response.width + 'x' + response.height );
            console.log( 'Size:', response.size + 'B' );
        } );
    } );
} )

如果您使用任何远程后端，例如Dropbox，您可能需要使用 file：getUrl 请求获取文件的URL。

If you are using any remote backend such us Dropbox you might need to use the file:getUrl request to obtain the file's URL.

这篇关于CKFinder如何在选择图像时获取尺寸URL和尺寸（宽度/高度）（文件：选择）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！