DropzoneJS - 업로드 된 파일을 표시하는 방법?

Question

이미 업로드 된 파일을 보려면 dropzoneJS를 어떻게합니까? 문서 단계에 따라 업로드가 작동하지만 이미 업로드 된 파일이 표시되지 않습니다.

<?php 

$ds = DIRECTORY_SEPARATOR; 
$storeFolder = 'uploads'; 

if (!empty($_FILES)) { 

    $tempFile = $_FILES['file']['tmp_name']; 
    $targetPath = dirname(__FILE__) . $ds. $storeFolder . $ds; 
    $targetFile = $targetPath. $_FILES['file']['name']; 
    move_uploaded_file($tempFile,$targetFile); 

} else { 

    $result = array(); 
    $files = scandir($storeFolder);     
    if (false!==$files) { 
    foreach ($files as $file) { 
     if ('.'!=$file && '..'!=$file) {  
      $obj['name'] = $file; 
      $obj['size'] = filesize($storeFolder.$ds.$file); 
      $result[] = $obj; 
     } 
    } 
} 
    header('Content-type: text/json');    
    header('Content-type: application/json'); 
    echo json_encode($result); 
} 
?> 

Answer 1

당신은 추가 할 수있는 이벤트 핸들러 : - :

<form action="upload.php" class="dropzone" id="my-dropzone"></form> 

스크립트 : upload.php로

<script type="text/javascript"> 
     $(document).ready(function() {   
      Dropzone.autoDiscover = false; 
      $("#my-dropzone").dropzone({ 
       //url: "/file/post", 
       addRemoveLinks : true, 
       maxFilesize: 0.5, 
       dictResponseError: 'Erro ao fazer o upload !' 
      }); 
     }) 
</script> 

<script type="text/javascript">  
     Dropzone.options.myDropzone = { 
      init: function() { 
       thisDropzone = this;      
       $.get('upload.php', function(data) { 
        $.each(data, function(key,value){ 
         var mockFile = { name: value.name, size: value.size };       
         thisDropzone.options.addedfile.call(thisDropzone, mockFile);    
         thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "uploads/"+value.name);       
        });      
       }); 
      } 
     }; 
</script> 

코드 지원

HTML 양식 코드

감사합니다 ~ "queuecomple te "로 표시됩니다. 이 핸들러에서 이미지를로드하는 다른 함수를 호출하십시오.

이것은 업로드 된 이미지를로드하고 업로드 양식을 재설정하는 데 필요한 나의 예제 코드입니다.

Dropzone.options.myAwesomeDropzone = { 
    init: function(){ 
     var th = this; 
     this.on('queuecomplete', function(){ 
      ImageUpload.loadImage(); // CALL IMAGE LOADING HERE 
      setTimeout(function(){ 
       th.removeAllFiles(); 
      },5000); 
     }) 
    }, 
    paramName: "file", // The name that will be used to transfer the file 
    maxFilesize: 2, // MB  
    acceptedFiles: 'image/*', 

};