В настоящее время я использую 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 извлекает данные
заранее спасибо
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
EDIT: в версии 4.0 миниатюры существующих файлов будут показаны с помощью битовой панели. Чтобы решить эту проблему, добавьте:
thisDropzone.emit("complete", mockFile);
Именно так я его и реализовал. Я использовал 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); }); }
Решения, данные до сих пор, не работали с 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 событие, чтобы убедиться, что не отображаются индикаторы выполнения и т. Д.
Справка
У меня возникли проблемы с 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); });