Dropzone.js - 显示在服务器上的现有文件器上、文件、Dropzone、js
我目前使用dropzone.js v3.10.2我有显示我已经上传了我存在的文件的问题。我更称职用PHP但我有限的知识，当涉及到AJAX和JS
I'm currently using dropzone.js v3.10.2 I am having issues displaying my existing files I have already uploaded. I am more than competent with php however I have limited knowledge when it comes to ajax and js
如果你能帮助这将是真棒
If you could help that would be awesome
在此先感谢
的index.php
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的
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是检索数据
PS. I know the php is retrieving the data
在此先感谢
达米安
推荐答案
我查了code（从starTutorial），它并没有为我工作，要么（？）
I checked the code (from starTutorial) and it didn't work for me either(?)
我设法得到它的工作通过更换这样的：
I managed to get it working by replacing 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);
});
});
这一点：
$.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);
});
});
感谢这样的回答： http://stackoverflow.com/a/5531883/984975
编辑： 在4.0版本的现有文件的缩略图将显示在它的提示吧。为了解决这个地址：
In version 4.0 the thumbnails of the existing files will be showed with the cue bar in it. To solve this add:
thisDropzone.emit("complete", mockFile);
