仅当单击提交按钮时，如何让 Dropzone.js 上传文件？
Posted
技术标签:
【中文标题】仅当单击提交按钮时，如何让 Dropzone.js 上传文件？【英文标题】：How to get Dropzone.js to upload files only when a submit button is clicked? 【发布时间】：2013-11-22 12:33:34 【问题描述】：在过去的几天里，我一直在尝试在我的表单中实现 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
<!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>
【问题讨论】：
似乎您正在使用表单以及 jQuery 解决方案。 dropzonejs.com/#toc_4 声明 URL 必须设置为有效。如何更改 jQuery 部分中的 url？从这里：var myDropzone = new Dropzone("div#myId", url: "file-upload"); 到 var myDropzone = new Dropzone("div#myId", url: "<?php echo '/test/collect_input'; ?>");
我不清楚你的问题。 Dropzone 是否没有按您的预期工作（即：自动上传等），或者您是否试图弄清楚一旦提交表单后如何在服务器端处理文件？
你读过Combine-normal-form-with-Dropzone吗？
【参考方案1】：
<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>
【讨论】：
$('#dropzoneForm').get(0).dropzone.processQueue(); 的 get 参数是什么？
@AkshayShrivastav 即触发上传。【参考方案2】：
您可以提供自己的网址来上传文件。目前我只是将其设置为'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();
);
);
【讨论】：
以上是关于仅当单击提交按钮时，如何让 Dropzone.js 上传文件？的主要内容，如果未能解决你的问题，请参考以下文章