将标准形式与Dropzone结合使用 [英] Combine normal form with Dropzone
问题描述
我正在使用dropzone.js创建一个拖放区域表单。我首先将表单设置为自动上传文件，这工作得很好，但我调整了表单，只有在用户提交数据时才工作，我添加了一个名为custom_dropzone.js的文件，表单似乎可以正常工作，但文件却从未上传到该文件夹。
HTML代码（index.php）
< ;！doctype html>
< html>
< head>
< meta charset =UTF-8>
< title>无标题文档< / title>
< head>
< link href =css / dropzone.csstype =text / css =stylesheet/>
< script src =dropzone.min.js>< / script>
< script src =custom_dropzone.js>< / script>
<！ - 现在设置您的输入栏 - > ;
< input type =emailname =username/>
< input type =passwordname =password/>
< button type =submit>提交资料和档案！< / button>
< / form>
< / body>
< / html>
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 [文件] [名]; // 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
}
？>
新的JS custom.dropzone.js似乎破坏了upload.php函数
Dropzone.options.myAwesomeDropzone = {//表单元素ID的驼峰版本
//配置我们讨论过
autoProcessQueue：false，
uploadMultiple：true，
parallelUploads：3，
maxFiles：3，
previewsContainer：.dropzone-previews ，
accept：function（file，done）{
console.log（uploaded）;
done（）;
$，
init：function（）{
this.on（maxfilesexceeded，function（file）{
alert（没有更多文件请！ ）;
}）;
}，
//设置dropzone
init：function（）{
var myDropzone = this;
//首先更改按钮以实际告诉Dropzone处理队列。
this.element.querySelector（button [type = submit]）。addEventListener（click，function（e）{
//确保表单实际上没有被发送。
e.preventDefault（）;
e.stopPropagation（）;
myDropzone.processQueue（）;
}）;
//收听sendingmultiple事件。在这种情况下，它是sendmultiple事件，而不是发送事件的
//，因为uploadMultiple设置为true。
this.on（sendingmultiple，function（）{
//实际发送表单时触发
//隐藏成功按钮或完整表单
}）;
this.on（successmultiple，函数（文件，响应）{
//成功发送文件时触发
//重定向用户或通知成功
}）;
this.on（errormultiple，function（files，response）{
//当发送文件时发生错误时触发
//可能再次显示表单并通知用户错误
}）;
}
}
感谢您的帮助。我只需要上传文件，其他东西似乎都可以正常工作。
使用dropzone，您似乎不需要
method ='post'
enctype ='multipart / form-data'
就像Shankar提到的那样......但是谢谢你
我通过从custom_dropzone.js注释掉下面的js来解决这个问题：
// uploadMultiple：true，
I am creating a drop zone form using dropzone.js. I firstly set the form up to automatically upload the file this worked fine, but I adapted the form to work only when the user submitted the data, i added file called custom_dropzone.js and the form appeared to work but the files never got uploaded to the folder.
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" />
<script src="dropzone.min.js"></script>
<script src="custom_dropzone.js"></script>
<!-- Now setup your input fields -->
<input type="email" name="username" />
<input type="password" name="password" />
<button type="submit">Submit data and files!</button>
</form>
</body>
</html>
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,
uploadMultiple: true,
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
});
}
}
thanks for a lll your help. I just need the file to be uploaded, every thing else seems to work fine
With dropzone it seems that you do not need method='post' enctype='multipart/form-data' like what was mentioned by Shankar … but thank you
I resolved this by commenting out the below line of js from custom_dropzone.js
//uploadMultiple: true,
这篇关于将标准形式与Dropzone结合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
