Sử dụng Dropzone.js để tải lên sau khi tạo người dùng mới, gửi tiêu đề

Question

Tôi đang sử dụng plugin tuyệt vời - dropzone.js (dropzonejs.com) để làm cho trang web của tôi trở nên thú vị hơn khi đăng ký người dùng mới.

Về cơ bản, người dùng điền vào biểu mẫu, thả một vài hình ảnh vào "vùng thả" và nhấp vào "Gửi", kích hoạt cuộc gọi ajax đăng biểu mẫu lên tập lệnh php.

Tôi có tham số dropzone được đặt thành enqueForUpload: false, giữ cho tệp không tự động tải lên vì tôi cần chúng tải lên video tải lên/$ userid sau khi id người dùng mới được tạo. Tôi có thể cung cấp thông số tiêu đề dropzone, mà tôi giả định đăng lên url, tương tự như cuộc gọi ajax, thay vì dữ liệu: {'userid': userid}, dropzone sử dụng tiêu đề: {'userid': userid} ... Tuy nhiên , dropzone được khởi tạo trên document.ready và do biến userid chưa được khai báo, dropzone không khởi tạo được.

Tôi đoán tôi sẽ cần phải khởi tạo dropzone với tài liệu.đã có, nhưng chưa đưa ra tiêu đề. Sau đó, sau khi xử lý biểu mẫu ajax thành công và trả về userid, hãy gọi dropzone để tải lên và cung cấp cho nó tiêu đề tại điểm đó. Vấn đề là, tôi không biết mã nào cần phải được gọi để thực hiện điều đó.

Initialize dropZone trên đã sẵn sàng:

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

Sau đó ...

$('#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

Nếu bạn sử dụng phiên bản mới nhất dropZone, tham số enqueueForUpload đã được gỡ bỏ, ủng hộ autoProcessQueue mà làm cho toàn bộ xếp hàng dễ dàng hơn.

Vì vậy, chỉ cần gọi myDropzone.processQueue() ngay khi bạn muốn tất cả các tệp được tải lên.

Để thêm các thông số bổ sung cho XHR bạn chỉ có thể đăng ký để sự kiện sending, mà được các đối tượng xhr như thứ hai và formData như tham số thứ ba, và thêm dữ liệu cho mình. Một cái gì đó như thế này:

myDropzone.on("sending", function(file, xhr, formData) { 
    // add headers with xhr.setRequestHeader() or 
    // form data with formData.append(name, value); 
}); 

Answer 2

tôi đã sử dụng câu trả lời Enyo, nhưng tôi sử dụng nhiều dropzones với thuộc tính dữ liệu id trong trang của tôi vì vậy tôi sử dụng:

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