我目前正在使用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正在检索数据
达米安
我检查了代码(来自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); }); });
编辑:在4.0版中,现有文件的缩略图将与提示栏一起显示。要解决此问题,请添加:
thisDropzone.emit("complete", mockFile);