10

我正在使用一个很棒的插件 - dropzone.js (dropzonejs.com) 来让我的网站在注册新用户时更加美观。

基本上，用户填写一个表单，将几个图像放入“dropzone”，然后单击“Submit”，这会触发一个将表单发布到 php 脚本的 ajax 调用。

我将 dropzone 参数设置为 enqueForUpload:false，这可以防止文件自动上传，因为我需要在创建新用户 ID 后将它们上传到 uploads/$userid。我可以提供 dropzone 标头参数，我假设将其发布到 url，类似于 ajax 调用，而不是数据：{'userid': userid}，dropzone 使用标头：{'userid': userid}... 但是，dropzone 在 document.ready 上被初始化，并且由于尚未声明 userid 变量，dropzone 无法初始化。

我猜我需要用 document.ready 初始化 dropzone，但还没有给它标题。然后在ajax表单处理成功并返回userid后，调用dropzone进行上传并给它此时的headers。问题是，我不知道需要调用什么代码才能做到这一点。

准备就绪时初始化 Dropzone：

$(document).ready(function(){
  $('#dropzone').dropzone({
    url: 'dropzoneprocess.php',
    maxFilesize: 1,
    paramName: 'photos',
    addRemoveLinks: true,
    enqueueForUpload: false,
  });
});

然后...

$('#submit').on('click', function(){
    validation crap here
    $.ajax({
        type: 'post',
        url: 'postform.php',
        data: {'various': form, 'values': here}
        datatype: 'json',
        success: function(data){
           var userid = data.userid;

    /* (and this is what I can't figure out:)
    tell dropzone to upload, and make it 
    post userid to 'dropzone.php' */

     });
});
4

2 回答 2

26

如果您使用最新的 Dropzone 版本，该参数enqueueForUpload已被删除，有利于autoProcessQueue整个排队更容易。

所以，只要myDropzone.processQueue()你想上传所有文件就打电话。

要添加其他参数，XHR您可以简单地注册到sending事件，该事件将xhr对象作为第二个和formData第三个参数，然后自己添加数据。像这样的东西：

myDropzone.on("sending", function(file, xhr, formData) {
  // add headers with xhr.setRequestHeader() or
  // form data with formData.append(name, value);
});
于 2013-07-09T12:23:52.010 回答
4

我使用了 enyo 答案，但是我在页面中使用了许多带有 data-id 属性的 dropzone，所以我使用了：

$('div.dropzone').dropzone({
    url: 'img.php'
});
var sendingHandler = function(file, xhr, formData) {
    formData.append('id', $(this.element).data('id'));
};
$('div.dropzone').each(function() {
    Dropzone.forElement(this).on('sending', sendingHandler);
});
于 2013-11-10T18:57:50.377 回答