Question

我正在使用一个很棒的插件 - dropzone.js（dropzonejs.com），以便在注册新用户时让我的网站更加流行。

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

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

我猜我需要使用document.ready初始化dropzone，但还没有给它标题。然后在ajax表单处理成功并返回userid后，调用dropzone上传并在该点为其提供标题。问题是，我不知道需要调用哪些代码来实现这一点。

准备好初始化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' */

     });
});

Answer 1

如果您使用最新的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);
});

Answer 2

我使用了enyo答案，但我在页面中使用了许多带有data-id属性的dropzones，因此我使用了：

$('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);
});

在新用户创建后使用Dropzone.js上传，发送标头

2 个答案: