Question

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

Answer 1

您可以将事件处理程序添加到＆＃34; queuecomplete＆＃34;掉落区。在此处理程序中，调用另一个加载图像的函数。

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

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

};

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

1 个答案: