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

代碼Additionaly我有分量，其中規模圖像。我之前在使用標準上傳表單時使用它。

public function resizeImage($imagePath){ 

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

歐凱，現在我該如何通過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文件。