我目前使用的是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>
上传.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正在检索数据
提前感谢
Damian
我检查了代码(来自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);
对于Dropzone 5.x
到目前为止给出的解决方案不适用于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);
}
其概念是，创建一个模拟文件，并调用事件处理程序addedfile和thumbnail来绘制预览。然后最后调用complete事件以确保没有显示进度条等。
参考
我将把对我有用的解决方案留在这里。(Dropzone v.7.0和Codeigniter v3.1.11(
- 使用Dropzone选项init
- 对后端脚本进行AJAX调用，该脚本返回包含图像信息的json编码的对象数组(问题中的PHP方法，这里的Codeigner方法(
- 使用jQuery-each函数迭代包含图像信息的每个对象
- 在此处使用代码段：https://github.com/enyo/dropzone/wiki/FAQ#how-显示已存储在服务器上的文件以显示每个图像
在我的应用程序控制器中：
public function ilan_fotolari($ilan_id = 0)
{
$this->load->helper('ilan');
$dirPath = './assets/uploads/'.ilan_dir($ilan_id);
$this->load->helper('file');
$file_names = get_filenames($dirPath);
$mocks = [];
foreach ($file_names as $file_name) {
$mock['name'] = $file_name;
$dirUrl = base_url('assets/uploads/'.ilan_dir($ilan_id));
$mock['url'] = $dirUrl.$file_name;
$mocks[] = $mock;
}
$this->output
->set_content_type('application/json')
->set_output(json_encode($mocks));
}
在我的脚本.js:中
Dropzone.options.ilanFotoAlani = {
paramName: "foto", // The name that will be used to transfer the file
maxFilesize: 5, // MB
maxFiles: 9,
resizeWidth: 1000,
resizeHeight: 644,
resizeMimeType: 'image/jpeg',
addRemoveLinks: true,
dictDefaultMessage: 'Fotoğraf sürükle veya seç',
dictFileTooBig: 'Fotoğraf boyutu en fazla 5MB olmalı',
dictRemoveFile: 'Fotoğrafı sil',
dictCancelUpload: 'İptal et',
dictMaxFilesExceeded: 'En fazla 9 fotoğraf yükleyebilirsin',
init: function () {
let myDropzone = this;
$.ajax({
type: 'get',
url: '/ilan-fotolari',
success: function(mocks){
$.each(mocks, function(key,value) {
let mockFile = { name: value.name, size: 1024 };
myDropzone.displayExistingFile(mockFile, value.url);
});
},
error: function(xhr, durum, hata) {
alert("Hata: " + hata);
}
});
}
};
我把不同的解决方案混合在一起。
新更新
这是一个老问题，但在Dropzone的最新版本中，更准确地说，从5.7.0版本开始，可以轻松地显示现有文件通过名为CCD_ 4的专用方法。
示例
let myDropzone = new Dropzone("div#myId", {
url: "/file/post"
});
const files = [
{name: 'square-600', size: 1000, url: 'https://via.placeholder.com/600'},
{name: 'square-800', size: 1200, url: 'https://via.placeholder.com/800'}
];
files.forEach(function (file) {
let mockFile = {
name: file.name,
size: file.size,
};
myDropzone.displayExistingFile(mockFile, file.url);
});
displayExistingFile的类型定义
displayExistingFile(
mockFile: Dropzone.DropzoneMockFile,
imageUrl: string,
callback?: () => void,
crossOrigin?: 'anonymous' | 'use-credentials',
resizeThumbnail?: boolean,
): any;
这就是我实现它的方式。我使用了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);
});
}
我遇到了maxFiles/maxfileexceeded的问题，在寻找anwser时花了一些时间，然后我在下面找到了这个链接：
https://www.bountysource.com/issues/1444854-use-files-already-stored-on-server-wiki-example-incomplete?utm_campaign=plugin&utm_content=跟踪器%2F283989&utm_medial=问题&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);
});
我只是要离开对我有用的解决方案。
此设置将已上载的文件计数到maxFiles限制，并使用简单约定。
- Laravel 9.19
- Dropzone 6.0.0 Beta
假设您已将文件存储在storage'app'public文件夹，并已使用创建符号链接
php artisan storage:link
命令，按照下面的代码段设置GET路由以从服务器端返回文件
use Illuminate'Support'Facades'File;
$uploaded_path = 'storage''uploads'''.$user['id'].'''images';
$images_info = [];
$images = File::allFiles(public_path($uploaded_path));
// Read images
foreach ($images as $image) {
$filename = $image->getFilename();
$size = $image->getSize();
$images_info[] = array(
"name" => $filename,
"size" => $size,
"path" => url($uploaded_path.''''.$filename)
);
}
return response()->json($images_info, 200);
然后在前端，在下降区init()功能内，
init: function() {
var thisDropzone = this
$.get('insert_the_route_to_above_function_on_serverside', function(data) {
$.each(data, function(key, value){
var mockFile = {
name: value.name,
size: value.size,
accepted: true
}
thisDropzone.files.push(mockFile);
thisDropzone.displayExistingFile(mockFile, value.path)
});
})
}