Question

我目前正在使用dropzone.js v3.10.2我在显示已上传的现有文件时遇到问题。我对php非常称职，但是当谈到ajax和js

时，我的知识有限

如果你能提供帮助那就太棒了

提前致谢

的index.php

    <html>

<head>  

<link href="css/dropzone.css" type="text/css" rel="stylesheet" />


<script src="ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="dropzone.min.js"></script>

<script>

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>

</head>

<body>


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

</body>

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);                 //1
    if ( false!==$files ) {
        foreach ( $files as $file ) {
            if ( '.'!=$file && '..'!=$file) {       //2
                $obj['name'] = $file;
                $obj['size'] = filesize($storeFolder.$ds.$file);
                $result[] = $obj;
            }
        }
    }

    header('Content-type: text/json');              //3
    header('Content-type: application/json');
    echo json_encode($result);
}
?>

PS。我知道php正在检索数据

提前致谢

达米安

Answer 1

我检查了代码（来自starTutorial），它对我来说也不起作用（？）

我设法通过替换它来实现它：

$.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);
  });
});

用这个：

$.getJSON('files/list-all', function(data) {
  $.each(data, function(index, val) {
    var mockFile = { name: val.name, size: val.size };
    thisDropzone.options.addedfile.call(thisDropzone, mockFile);
    thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "uploads/" + val.name);
  });
});

相信这个答案：https://stackoverflow.com/a/5531883/984975

编辑：在4.0版中，现有文件的缩略图将显示在其中的提示栏中。要解决此问题，请添加：

thisDropzone.emit("complete", mockFile);

Answer 2

对于Dropzone 5.x

到目前为止给出的解决方案不适用于 dropzone版本5.x 。对我有用的是修改dropzone的配置选项，如下所示：

ctx.fillText(myLines[lineMarker%3], 8, 250);
ctx.fillText(("Line number is: "+lineMarker.toString()), 10,80);

概念是，创建模拟文件，并调用事件处理程序 init: function () { var mockFile = { name: 'FileName', size: '1000', type: 'image/jpeg', accepted: true // required if using 'MaxFiles' option }; this.files.push(mockFile); // add to files array this.emit("addedfile", mockFile); this.emit("thumbnail", mockFile, 'http://url/to/file'); this.emit("complete", mockFile); } 和 addedfile 来绘制预览。然后最后调用 thumbnail 事件以确保没有显示进度条等。

Reference

Answer 3

这是我实施它的方式。我使用 createThumbnailFromUrl 而不是使用发出缩略图事件。

HTML元素;

<form id="sample-img" action="/upload" class="dropzone">
    <div class="dz-default dz-message"></div>
</form>

JS代码;

previewThumbailFromUrl({
    selector: 'sample-img',
    fileName: 'sampleImg',
    imageURL: '/images/sample.png'
});

function previewThumbailFromUrl(opts) {
    var imgDropzone = Dropzone.forElement("#" + opts.selector);
    var mockFile = {
        name: opts.fileName,
        size: 12345,
        accepted: true,
        kind: 'image'
    };
    imgDropzone.emit("addedfile", mockFile);
    imgDropzone.files.push(mockFile);
    imgDropzone.createThumbnailFromUrl(mockFile, opts.imageURL, function() {
        imgDropzone.emit("complete", mockFile);
    });
}

Answer 4

我遇到了maxFiles / maxfilesexceeded的问题，并在寻找一个anwser时花了一些时间，然后我在下面找到了这个链接：

https://www.bountysource.com/issues/1444854-use-files-already-stored-on-server-wiki-example-incomplete?utm_campaign=plugin&utm_content=tracker%2F283989&utm_medium=issues&utm_source=github

$.each(obj, function(i, item) {

  ///faking the BytesSent its not essanail to me.. if you need it just pass the correct one
  var upload = {bytesSent: 12345};

  /// again fake the size..
  var mockFile = {name: item.name, size: 12345, accepted: true};

  mockFile.upload = upload;
  mockFile.kind = "file";
  Dropzone.forElement("#editfileuploader").emit("addedfile", mockFile);

  //push the file to files array because getAcceptedFiles using this array length to get the currct files count..
  Dropzone.forElement("#editfileuploader").files.push(mockFile);

  //this for lettig dropzone to creat the thumbnail(item.ts has the file location)
  Dropzone.forElement("#editfileuploader").emit("thumbnail", mockFile, item.ts);

  //to show the success mark and to return image id response
  Dropzone.forElement("#editfileuploader").emit("success", mockFile, item.id);
});

Answer 5

我要把对我有用的解决方案留在这里。（Dropzone v5.7.0和Codeigniter v3.1.11）

使用Dropzone选项初始化
对后端脚本进行AJAX调用，该脚本将返回包含图像信息的json编码对象数组（问题中的PHP方式，此处为Codeigniter方式）
使用jQuery每个函数在包含图像信息的每个对象上进行迭代
在此处使用摘录：https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server以显示每个图像

在我的App控制器中：

lib-module

在我的script.js中：

app

我将不同解决方案中的解决方案混合在一起。

Dropzone.js - 显示服务器上的现有文件

5 个答案:

对于Dropzone 5.x