我之所以使用Dropzone，是因为我不认为Summernote可以上传pdf，word等其他文件。
mainpage.php ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="dropzone.css" rel="stylesheet">
<script src="dropzone.js"></script>
<!-- Summernote css -->
<link href="../plugins/summernote/summernote.css" rel="stylesheet" />
<!-- Select2 -->
<link href="../plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
<!-- Jquery filer css -->
<link href="../plugins/jquery.filer/css/jquery.filer.css" rel="stylesheet" />
<link href="../plugins/jquery.filer/css/themes/jquery.filer-dragdropbox-theme.css" rel="stylesheet" />
<!-- App css -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/core.css" rel="stylesheet" type="text/css" />
<link href="assets/css/components.css" rel="stylesheet" type="text/css" />
<link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
<link href="assets/css/pages.css" rel="stylesheet" type="text/css" />
<link href="assets/css/menu.css" rel="stylesheet" type="text/css" />
<link href="assets/css/responsive.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../plugins/switchery/switchery.min.css">
<script src="assets/js/modernizr.min.js"></script>
</head>
<body>
<div id="wrapper">
<!-- Start content -->
<div class="content">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="page-title-box">
<h3>Postare raspuns</h3>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- end row -->
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="p-6">
<div class="">
<form id="myAwesomeDropzone" class="dropzone" action="upload.php" method="POST" style="border:none" novalidate>
<div class="row">
<div class="col-sm-12">
<div class="card-box">
<h4 class="m-b-30 m-t-0 header-title"><b>Textul postarii</b></h4>
<textarea class="summernote" name="postdescription" id="postdescription" required></textarea>
</div>
</div>
</div>
<h4 class="m-b-30 m-t-0 header-title"><b>Ataseaza fisiere</b></h4>
<div>
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</div>
</form>
<br>
<input type="submit" name="pos" id="pos" value="Postare" class="btn btn-success btn-block" form="myAwesomeDropzone" />
<br>
<br>
<div class="btn btn-info btn-block">
<a href="read_topic.php?id=<?php echo $id ?>" class="btn btn-block" style="color:white">Inapoi la subiect</a>
</div>
</div>
</div>
<!-- end p-20 -->
</div>
<!-- end col -->
</div>
<!-- end row -->
</div>
<!-- container -->
</div>
<!-- content -->
</div>
<script>
var resizefunc = [];
</script>
<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/detect.js"></script>
<script src="assets/js/fastclick.js"></script>
<script src="assets/js/jquery.blockUI.js"></script>
<script src="assets/js/waves.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<script src="../plugins/switchery/switchery.min.js"></script>
<script src="../plugins/summernote/summernote.min.js"></script>
<script src="../plugins/select2/js/select2.min.js"></script>
<script src="../plugins/jquery.filer/js/jquery.filer.min.js"></script>
<script src="assets/pages/jquery.blog-add.init.js"></script>
<script src="assets/js/jquery.core.js"></script>
<script src="assets/js/jquery.app.js"></script>
<script>
$(document).ready(function() {
$('.summernote').summernote({
height: 240,
minHeight: null,
maxHeight: null,
focus: false,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['fontname', ['fontname']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['view', ['fullscreen', 'codeview', 'help']]
],
popover: {
air: []
}
});
$(".select2").select2();
$(".select2-limiting").select2({
maximumSelectionLength: 2
});
Dropzone.options.myAwesomeDropzone = {
autoProcessQueue: false,
url: upload.php,
uploadMultiple: true,
parallelUploads: 20,
maxFiles: 20,
addRemoveLinks: true,
// Dropzone settings
init: function() {
var myDropzone = this;
this.element.querySelector("#pos").addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
this.on("sendingmultiple", function(data, xhr, formData) {
//Add additional data to the upload
formData.append("postdescription", jQuery("postdescription").val());
});
this.on("success", function(file, responseText) {
console.log('dfd');
});
}
}
});
</script>
<script src="../plugins/switchery/switchery.min.js"></script>
<!--Summernote js-->
<script src="../plugins/summernote/summernote.min.js"></script>
</body>
</html>
upload.php ：
<?php
if(!empty($_FILES)){
foreach($_FILES['file']['name'] as $key=>$val){
$file_name = $_FILES['file']['name'][$key];
// get file extension
$ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
// get filename without extension
$filenamewithoutextension = pathinfo($file_name, PATHINFO_FILENAME);
if (!file_exists(getcwd(). '/uploads')) {
mkdir(getcwd(). '/uploads', 0777);
}
$filename_to_store = $filenamewithoutextension. '_' .uniqid(). '.' .$ext;
move_uploaded_file($_FILES['file']['tmp_name'][$key], getcwd(). '/uploads/'.$filename_to_store);
}
echo "File(s) uploaded successfully";
}
else
{
echo "1";
}
?>
问题3： 我尝试这样做是为了查看 upload.php 是否真的没有任何文件，所以我尝试在Dropzone队列不存在时显示警报。但是，当我单击“提交”按钮时，它会带我到 upload.php 而不显示任何警报。
if (myDropzone.getQueuedFiles().length > 0) {
alert("yes");
}
else
{
alert("error")
}