Cakephp 3 jQuery文件上传

Question

我在cakephp3应用程序中使用jQuery文件上传。 现在我在处理这些图像时遇到问题。

这是我上传的代码

$this->viewBuilder()->layout(false);

// if($this->request->is('post')){

    require_once(ROOT .DS. 'vendor' . DS  . 'jqUploader' . DS . 'UploadHandler.php');

    $options = array(
        'upload_dir' => WWW_ROOT . 'upload/',        
        'accept_file_types' => '/\.(gif|jpe?g|png)$/i'       
       );

    $upload_handler = new \UploadHandler($options);

    $d = $this->request->data;



// }


$this->render('/Elements/json');

另外我有比例图像的组件。 我在我的应用使用标准上传表单之前就在使用它。

public function resizeImage($imagePath){

        $imagick =  new \Imagick($imagePath);
.......
........
........
}

Okey，现在如何通过jquery文件上载器（UploadHandler.php）上载图像并使用函数缩放它？

---

控制台日志输出：

SyntaxError: Unexpected token { in JSON at position 12
    at parse (<anonymous>)
    at Nb (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js:4:10360)
    at A (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js:4:13887)
    at XMLHttpRequest.<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js:4:16491)

---

JS

$(function () {
    'use strict';

    var url = $("#gallery-up").attr('action');
    var cache;

    var galery_up = $('#gallery-up').fileupload({
        url: url,
        dataType: 'json',
        autoUpload: false,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        maxFileSize: 999000,
        disableImageResize: /Android(?!.*Chrome)|Opera/
        .test(window.navigator.userAgent),
        previewMaxWidth: 100,
        previewMaxHeight: 100,
        previewCrop: true
    }).on('fileuploadadd', function (e, data) {
        console.log(url);
        var p = $("#image-files").find("tbody");
        data.context = $('<tr />').appendTo(p);

        $.each(data.files, function (index, file) {



            if(file.name){

            var addToTable = '\
                <td class="preview" ></td>\
                <td>'+file.name+'</td>\
                <td>\
                    <button type="button" class="btn btn-danger delete">\
                    <i class="glyphicon glyphicon-trash"></i>\
                    <span>Usuń</span>\
                    </button>\
                </td>';


            data.context.append(addToTable);
            }else{
                data.context.remove();
            }
        });


            $('#btn-start-gallery').click(function(){
                data.submit();
            })


    }).on('fileuploadprocessalways', function (e, data) {   
        console.log('fileuploadprocessalways'); 
        var index = data.index,
        file = data.files[index],
        node = $(data.context.children()[index]);
        if (file.preview) {
            node.closest('tr').find('.preview').append(file.preview);
        }
        if (file.error) {
            // node
            // .append('<br>')
            // .append($('<span class="text-danger"/>').text(file.error));
            node.closest('tr').remove();
        }
        if (index + 1 === data.files.length) {
            // data.context.find('button')
            // .text('Upload')
            // .prop('disabled', !!data.files.error);
        }
    }).on('fileuploadprogressall', function (e, data) {
        console.log('fileuploadprogressall');
        console.log(data);
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .progress-bar').css(
            'width',
            progress + '%'
            );
    }).on('fileuploaddone', function (e, data) {
        console.log('po uploaddzie');
        $.each(data.result.files, function (index, file) {
            if (file.url) {
                var link = $('<a>')
                .attr('target', '_blank')
                .prop('href', file.url);
                $(data.context.children()[index])
                .wrap(link);
            } else if (file.error) {
                var error = $('<span class="text-danger"/>').text(file.error);
                $(data.context.children()[index])
                .append('<br>')
                .append(error);
            }
        });
    }).on('fileuploadfail', function (e, data) {
        console.log('fileuploadfail');
        console.log(data);
        $.each(data.files, function (index) {
            var error = $('<span class="text-danger"/>').text('File upload failed.');
            $(data.context.children()[index])
            .append('<br>')
            .append(error);
        });
    }).on('fileuploaddone', function (e, data) {
        console.log('fileuploaddone');
        cache = data;
    }).prop('disabled', !$.support.fileInput)
    .parent().addClass($.support.fileInput ? undefined : 'disabled');



});

Answer 1

好的，我找到了anwser，但也许其他人也有同样的问题。 我将输入的名称从文件更改为图库，并上传未找到的文件。 如果您有相同的问题，可以使用

'param_name' => 'gallery'

在您的php文件中。