dropzone.js - サーバー上の既存のファイルを表示します
-
21-12-2019 - |
質問
現在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がデータを取得していることを知っています
事前感あり
ダミアン
解決
コードを(スタートストリアルから)チェックし、それは私のためにうまくいかなかった(?)
私はこれを交換することによってそれを作動させることができました:
$.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では、既存のファイルのサムネイルにはCUEバーが表示されます。この追加を解決するには:
thisDropzone.emit("complete", mockFile);
. 他のヒント
ドロップゾーン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
と grefodicetagcode を呼び出してプレビューを描画します。そして、最後に thumbnail
イベントを呼び出して、表示されているプログレスバーなどがないことを確認します。
This is the way which I implemented it. I have used createThumbnailFromUrl rather using emitting a thumbnail event.
HTML element;
<form id="sample-img" action="/upload" class="dropzone">
<div class="dz-default dz-message"></div>
</form>
JS code;
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);
});
}
I was having trouble with maxFiles/maxfilesexceeded and take some while looking for a anwser and then I found this links below:
$.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);
});