Блог

У меня есть следующий код, который идеально подходит для загрузки нескольких изображений, но мне нужно отправить некоторые дополнительные данные через форму, используя обычный js. как это сделать? Мне также нужно опубликовать дополнительные параметры с отправкой, которые будут извлекать данные с помощью javascript: document.getElementById(«someid»).значение;

 <div class="container">
    <div id="msg"><?php echo isset($msg)?$msg:''; ?></div>
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="form-group">
                <div class="dropzone dz-clickable" id="myDrop">
                    <div class="dz-default dz-message" data-dz-message="">
                        <span>Drop files here to upload</span>
                    </div>
                    <input type="text" name="somename" value="this is input data" />
                    <!-- data like this -->
                </div>
            </div>
            <div class="form-group">
                <button type="submit" id="add_file" class="btn btn-primary" name="submit"><i class="fa fa-upload"></i> Upload File(s)</button>        
            </div>
        </div>
    </div>
</div>
<!--Only these JS files are necessary--> 
<script src="dropzone/dropzone.js"></script>
<script>
//Dropzone script
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#myDrop", 
 { 
     paramName: "__files", // The name that will be used to transfer the file
     addRemoveLinks: true,
     uploadMultiple: true,
     withCredentials: true,
     autoProcessQueue: false,
     parallelUploads: 50,
     maxFilesize: 20, // MB
     acceptedFiles: ".png, .jpeg, .jpg, .gif",
     url: "ajax/process.php",
 });

 
 /* Add Files Script*/
 myDropzone.on("success", function(file, message){
    $("#msg").html(message);
    //setTimeout(function(){window.location.href="index.php"},800);
 });
 
 myDropzone.on("error", function (data) {
     $("#msg").html('<div class="alert alert-danger">There is some thing wrong, Please try again!</div>');
 });
 
 myDropzone.on("complete", function(file) {
    myDropzone.removeFile(file);
 });
 
 $("#add_file").on("click",function (){
    myDropzone.processQueue();
 });
</script>
 

Добавьте его в инициализацию

 var myDropzone = new Dropzone("div#myDrop", 
 { 
     paramName: "__files", // The name that will be used to transfer the file
     addRemoveLinks: true,
     uploadMultiple: true,
     withCredentials: true,
     autoProcessQueue: false,
     parallelUploads: 50,
     maxFilesize: 20, // MB
     acceptedFiles: ".png, .jpeg, .jpg, .gif",
     url: "ajax/process.php",
     init: function () {
         this.on('sending', function(file, xhr, formData) {
             // Append all form inputs to the formData Dropzone will POST
             var info = document.getElementById("someid").value;
             formData.append('info', info);
         });
     }
 });