我目前正在使用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正在检索数据
先谢谢你了
大面
7条答案
按热度按时间ldfqzlk81#
我检查了代码(从starTutorial),它也不适合我(?)
我设法让它工作通过替换这个:
用这个:
这个答案归功于:https://stackoverflow.com/a/5531883/984975
编辑:在4.0版本中,现有文件的缩略图将显示提示栏。要解决这个问题,请添加:
tzxcd3kk2#
Dropzone 5.x
到目前为止给出的解决方案不适用于dropzone版本5.x。对我来说有效的是修改dropzone的配置选项如下:
概念是,创建一个mock文件,调用事件处理函数**
addedfile
和thumbnail
绘制预览。最后调用complete
**事件,确保没有进度条等显示。Reference
yyhrrdl83#
我离开这里的解决方案,为我工作。(Dropzone v5.7.0和Codeigniter v3.1.11)
1.使用Dropzone选项初始化
1.对后端脚本进行 AJAX 调用,该脚本返回包含图像信息的json编码对象数组(问题中的PHP方式,这里的Codeigniter方式)
1.使用jQuery each函数迭代包含图像信息的每个对象
1.在这里使用代码片段:https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server来显示每个图像
在我的App控制器中:
在我script.js中:
我把不同的解决方案混合在一起。
0lvr5msh4#
这是我实现的方式,我使用了createThumbnailFromUrl,而不是使用发出一个thumbnail事件。
HTML元素;
JS代码;
xienkqul5#
新更新
这是一个老问题,但在Dropzone的最新版本中,更准确地说,从版本5.7.0开始,可以通过名为
displayExistingFile
的专用方法轻松显示现有文件。示例
displayExistingFile类型定义
8ftvxx2r6#
我遇到了maxFiles/maxfilesexceeded的问题,在寻找一个anser时花了一些时间,然后我发现下面的链接:
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
1dkrff037#
我只是离开了对我有效的解决方案。
此设置将已上传的文件计数到
maxFiles
限制,并且还使用简单的约定。假设您已将文件存储在
storage\app\public
文件夹中,并使用php artisan storage:link
命令,按照下面的代码片段设置
GET
路由以从服务器端返回文件然后在前端,在dropzone
init()
函数中,