Dropzone表单验证 [英] Dropzone form validation
本文介绍了Dropzone表单验证的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用dropzone.js创建一个drop zone表单。当表单提交为空时，表单将通过提交空ULR而失败。如何重新验证表单以检查字段是否为空？
I am creating a drop zone form using dropzone.js. When the form submits empty the form fails by submitting to an empty ULR. How can I revalidate the form to check fields are not empty?
这是我的代码。感谢您的帮助。
This is my code. Thanks for all the help.
HTML CODE（index.php）
HTML CODE (index.php)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<head>
<link href="../CSS/dropzone.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form id="uploader" class="dropzone" action="upload.php"><BR> <BR>
<div class="dropzone-previews"></div><BR><BR> <!-- this is were the previews should be shown. -->
<div id="previews" class="dropzone-previews"></div>
<!-- Now setup your input fields -->
<input type="email" name="username" />
<input type="password" name="password" />
<input type="hidden" name="additionaldata" value="1" />
<button type="submit">Submit data and files!</button>
</form>
</body>
</html>
upload.php
upload.php
<?php
$ds = DIRECTORY_SEPARATOR; //1
$storeFolder = '../upload_test/uploads'; //2
if (!empty($_FILES)) {
$tempFile = $_FILES['file']['tmp_name']; //3
$targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds; //4
$targetFile = $targetPath. $_FILES['file']['name']; //5
$allowed = array('gif','png' ,'jpg');
$filename = $_FILES['file']['name'];
$ext = pathinfo($filename, PATHINFO_EXTENSION);
if(!in_array($ext,$allowed) ) {
echo 'error';
move_uploaded_file($tempFile,$targetFile); //6
}
?>
NEW JS custom.dropzone.js which seems to break the upload.php function
Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element
// The configuration we've talked about above
autoProcessQueue: false,
parallelUploads: 3,
maxFiles: 3,
previewsContainer: ".dropzone-previews",
accept: function(file, done) {
console.log("uploaded");
done();
},
init: function() {
this.on("maxfilesexceeded", function(file){
alert("No more files please!");
});
},
// The setting up of the dropzone
init: function() {
var myDropzone = this;
// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function() {
// Gets triggered when the form is actually being sent.
// Hide the success button or the complete form.
});
this.on("successmultiple", function(files, response) {
// Gets triggered when the files have successfully been sent.
// Redirect user or notify of success.
});
this.on("errormultiple", function(files, response) {
// Gets triggered when there was an error sending the files.
// Maybe show form again, and notify user of error
});
}
}
推荐答案
我今天遇到了类似的问题。
在我的情况下，Form是使用Zend Form Builder构建的（进行所有验证，...）
使其缩短（至少尽可能短）：
I ran into a similar problem today. In my case the Form was build with Zend Form Builder (doing all the validation,...) to make it short (at least as short as possible):
- 我将表单的现有fileuploadfield更改为标准文本输入字段（甚至可能隐藏） - 作为必填字段。
- 在表单上方添加了 dropzone ，创建了所需的PHP操作，除了将文件从php-tmp文件夹移动到我自己的tmp文件夹之外什么都不做（项目特定的）然后在js中返回新的路径/文件名为json
- 我在我的dropzone中添加了一个on succes函数，它带有 json结果并将附加到我的输入字段的内容（从1开始）
- 我的实际表单的Action采取那些路径做了一些其他东西（比如生成用户文件夹......）并将这些文件（通过dropzone上传）移动到这些新文件夹中。
- i changed the existing fileuploadfield of my form to a standard text input field (might even be hidden) - as a required field.
- Added dropzone above the form, created the required PHP Action which does nothing but move the files from php-tmp folder to my own tmp folder (project specific) and then returns the new path/filename as json
- in js I added a "on succes" function to my dropzone which takes the json result and appends it to the content of my input field (from 1)
- The Action of my actual form takes those paths does some other stuff (like generating user folders,...) and moves those files (uploaded via dropzone) into those new folders.
希望一世 可以帮助至少一点;）
Hope i could help at least a bit ;)
这篇关于Dropzone表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
