DropzoneJS - 如何显示上传的文件？答案

【问题标题】：DropzoneJS - How to show uploaded files?DropzoneJS - 如何显示上传的文件？
【发布时间】：2014-06-18 11:40:47
【问题描述】：

dropzoneJS 如何查看已经上传的文件？我按照文档的步骤进行了上传，但没有显示已经上传的文件。

感谢支持

HTML 表单代码：

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

脚本：

<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>

代码-upload.php：

<?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);
}
?>

【问题讨论】：

init: “是一个在 Dropzone 初始化时被调用的函数。你可以在这个函数中设置事件监听器。” （来自dropzonejs.com）看起来你在初始化dropzone时触发了AJAX调用，换句话说，没有加载任何文件。另外，您的 AJAX 如何让文件准备好上传？

标签： javascript scripting dropzone.js

【解决方案1】：

您可以将事件处理程序添加到 dropzone 的“queuecomplete”。在这个处理程序中，调用另一个加载图像的函数。

这是我加载上传图片和重置上传表单的示例代码。

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/*',

};

【讨论】：