CakePHP 3 jquery Datei hochladen

Question

Ich benutze jquery Datei-Upload in meiner CakePHP3-Anwendung. Jetzt habe ich Probleme mit diesen Bildern umzugehen.

Dies ist mein Code für das Hochladen

$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 habe ich Komponente, wo Stufenbilder. Ich verwende es bereits, wenn meine App das Standard-Upload-Formular verwendet.

public function resizeImage($imagePath){ 

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

Okey, jetzt wie ich Bild über jquery Datei Uploader (UploadHandler.php) hochladen und mit meiner Funktion skalieren?

---

Konsole Protokollausgabe:

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

Ok fand ich anwser, aber vielleicht haben andere Leute das gleiche Problem. Ich ändere den Namen in der Eingabe von Dateien in die Galerie und lade nicht gefundene Dateien hoch. Wenn Sie das gleiche Problem haben, können Sie in Ihren PHP-Dateien

verwenden.