php Dropzone.js - 在服务器上显示现有文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24009298/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dropzone.js - Display existing files on server
提问by user3702005
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
我目前正在使用 dropzone.js v3.10.2 我在显示我已经上传的现有文件时遇到问题。我非常擅长 php，但是我对 ajax 和 js 的了解有限
If you could help that would be awesome
如果你能帮忙那就太棒了
Thanks in advance
提前致谢
index.php
索引.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
<?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. I know the php is retrieving the data
附注。我知道 php 正在检索数据
Thanks in advance
提前致谢
Damian
达米安
回答by AturSams
I checked the code (from starTutorial) and it didn't work for me either(?)
我检查了代码（来自starTutorial），它对我也不起作用（？）
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);
});
});
with this:
有了这个：
$.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);
});
});
Credit to this answer: https://stackoverflow.com/a/5531883/984975
归功于此答案：https: //stackoverflow.com/a/5531883/984975
EDIT: In version 4.0 the thumbnails of the existing files will be showed with the cue bar in it. To solve this add:
编辑：在 4.0 版中，现有文件的缩略图将与提示栏一起显示。要解决此问题，请添加：
thisDropzone.emit("complete", mockFile);
回答by Niket Pathak
For Dropzone 5.x
对于 Dropzone 5.x
The solutions given so far did not work with dropzone version 5.x. What worked for me was to modify dropzone's config options as follows:
到目前为止给出的解决方案不适用于dropzone 版本 5.x。对我有用的是修改 dropzone 的配置选项，如下所示：
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);
}
The concept is, to create a mock file, and call the event handlers addedfileand thumbnailto draw the preview. And then finally call on completeevent to ensure that there are no progress bars, etc. being displayed.
这个概念是，创建一个模拟文件，并调用事件处理程序addedfile并thumbnail绘制预览。然后最后调用complete事件以确保没有显示进度条等。
回答by gihanchanuka
This is the way which I implemented it. I have used createThumbnailFromUrlrather using emitting a thumbnailevent.
这是我实现它的方式。我使用createThumbnailFromUrl而不是使用发出缩略图事件。
HTML element;
HTML 元素；
<form id="sample-img" action="/upload" class="dropzone">
<div class="dz-default dz-message"></div>
</form>
JS code;
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);
});
}
回答by Ricardo Fran?a
I was having trouble with maxFiles/maxfilesexceeded and take some while looking for a anwser and then I found this links below:
我遇到了 maxFiles/maxfilesexceeded 的问题，并在寻找 anwser 时花了一些时间，然后我在下面找到了以下链接：
$.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);
});
