php 仅当单击提交按钮时，如何让 Dropzone.js 上传文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19893962/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get Dropzone.js to upload files only when a submit button is clicked?
提问by Nouphal.M
for the past few days I've been trying to implement Dropzone into my form, but so far I had no luck figuring out how to make it upload and process the images only when the submit button gets clicked.
Therefore, I decided to come here and ask you guys for help.
I've made a example code structure so you can only take a look at what its necessary. Right now, I think its should work the way when I put some pictures into the Dropzone and click the button it triggers the collect_input function from the controller. But I have no clue how to process the files,etc. So, I guess what I'm asking for is a tip/solution on how to process the files from the form e.g.. Saving them to a folder and adding an entry to a database.
I'm gonna post the code below and if any of you have any tips or solutions please share them with me. I'd like to thank you all in advance for even reading this and for your replies. Btw I'm working in CodeIgniter.
[Download the whole project (css,js & php] http://puu.sh/5eqLc.zip
htdocs/application/controllers/test.php
在过去的几天里，我一直在尝试将 Dropzone 实施到我的表单中，但到目前为止，我还没有弄清楚如何仅在单击提交按钮时上传和处理图像。因此，我决定来这里向你们寻求帮助。
我已经制作了一个示例代码结构，因此您只能查看其必要的内容。现在，我认为当我将一些图片放入 Dropzone 并单击它会从控制器触发 collect_input 功能的按钮时，它应该可以工作。但我不知道如何处理文件等。所以，我想我要问的是如何处理表单中的文件的提示/解决方案，例如。将它们保存到文件夹并将条目添加到数据库中。
我将在下面发布代码，如果你们有任何提示或解决方案，请与我分享。我要提前感谢大家阅读本文和回复。顺便说一句，我在 CodeIgniter 工作。
[下载整个项目(css,js & php] http://puu.sh/5eqLc.zip
htdocs/application/controllers/test.php
<?php
class Test extends CI_Controller {
public function __construct() {
parent::__construct();
}
public function index() {
$this->load->view('test_view');
}
public function collect_input() {
}
}
htdocs/application/controllers/test_view.php
htdocs/application/controllers/test_view.php
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf=8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<!-- Load DropZone -->
<link href="<?php echo base_url(); ?>/css/basic.css" type="text/css" rel="stylesheet" />
<link href="<?php echo base_url(); ?>/css/dropzone.css" type="text/css" rel="stylesheet" />
<script src="<?php echo base_url(); ?>js/dropzone.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
var myDropzone = new Dropzone("div#myId", { url: "file-upload"});
});
</script>
<script type="text/javascript">
Dropzone.options.myId = {
// Prevents Dropzone from uploading dropped files immediately
autoProcessQueue: false,
init: function() {
var submitButton = document.querySelector("#add")
myDropzone = this; // closure
submitButton.addEventListener("click", function() {
myDropzone.processQueue(); // Tell Dropzone to process all queued files.
});
// You might want to show the submit button only when
// files are dropped here:
this.on("addedfile", function() {
// Show submit button here and/or inform user to click it.
});
}
};
</script>
</head>
<body>
<?php echo form_open('test/collect_input'); ?>
<!-- One of the many inputs of my form -->
<select id="list_type">
<option value="-1">Chooose a type</option>
<option value="1">>>Type A</option>
<option value="2">>>Type B</option>
</select>
<!-- Dropzone -->
<div id="myId" class="dropzone"></div>
<!-- Submit button-->
<input type="submit" id="add" name="add" value="Add!!">
</form>
</body>
</html>
回答by Nouphal.M
You can supply your own url to upload the file. Currently I am just setting it as 'someurl'
您可以提供自己的 url 来上传文件。目前我只是将它设置为'someurl'
Dropzone.autoDiscover = false;
jQuery(document).ready(function() {
var myDropzone = new Dropzone("#myId", {
url: 'someurl',
autoProcessQueue:false
});
$('#add').on('click',function(e){
e.preventDefault();
myDropzone.processQueue();
});
});
回答by Wagner da Silva
<script>
$(document).ready(function () {
Dropzone.options.dropzoneForm = {
autoProcessQueue: false
};
});
function processEvent() { // call this to trigger the upload
$('#dropzoneForm').get(0).dropzone.processQueue();
}
</script>
<form action="/your-post-url-here" method="post" enctype="multipart/form-data" class="dropzone" id="dropzoneForm"></form>
