Dropzone is not able to send data to php

末鹿安然 提交于 2019-12-24 05:10:05

问题


I have a simple form

<form class="form-horizontal form-label-left input_mask" enctype="multipart/form-data" action="addstudent.php" method="post" id="addstudent">

                  <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                    <input type="text" class="form-control has-feedback-left" id="stfname" placeholder="First Name*" required name="stfname">
                    <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
                  </div>

                  <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                    <input type="text" class="form-control" id="stlname" placeholder="Last Name*" required name="stlname">
                    <span class="fa fa-user form-control-feedback right" aria-hidden="true"></span>
                  </div>

                  <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                    <input type="text" class="form-control has-feedback-left" id="stmname" placeholder="Middle Name" name="stmname">
                    <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
                  </div>

                  <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                    <input type="text" class="form-control" id="stenrolid" placeholder="Enrollment ID*" required name="stenrolid">
                    <span class="fa fa-key form-control-feedback right" aria-hidden="true"></span>
                  </div>
                  <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Gender<span class="required">*</span></label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                      <div id="gender" class="btn-group" data-toggle="buttons">
                        <label class="btn btn-default" data-toggle-class="btn-primary" data-toggle-passive-class="btn-default">
                          <input type="radio" name="gender" id="stgender" value="male"> &nbsp; Male &nbsp;
                        </label>
                        <label class="btn btn-default" data-toggle-class="btn-primary" data-toggle-passive-class="btn-default">
                          <input type="radio" name="gender" id="stgender" value="female"> Female
                        </label>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Class<span class="required">*</span></label>
                    <div class="col-md-9 col-sm-9 col-xs-12">
                      <input type="text" class="form-control" id="stclass" placeholder="Class*" name="stclass" required>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Section<span class="required">*</span></label>
                    <div class="col-md-9 col-sm-9 col-xs-12">
                      <input type="text" class="form-control" id="stsection" name="stsection" placeholder="Section*" required>
                    </div>
                  </div>

                  <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Date Of Birth <span class="required">*</span>
                    </label>
                    <div class="col-md-9 col-sm-9 col-xs-12">
                        <div class='input-group date' id='myDatepicker2'>
                            <input type='text' class="form-control" id="stdob" name="stdob" required />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Student Image<span class="required">*</span></label>
                    <div class="dropzone col-md-9 col-sm-9 col-xs-12 " id="myDropzone" name="myDropzone">
                    </div>
                  </div>
                  <div class="ln_solid"></div>
                  <div class="form-group">
                    <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3">
                      <button type="button" class="btn btn-primary">Cancel</button>
                       <button class="btn btn-primary" type="reset">Reset</button>
                      <button type="submit" class="btn btn-success" id="submit-all">Submit</button>
                    </div>
                  </div>

                </form>

For uploading image I have a script:

<script>Dropzone.options.myDropzone= {
    url: 'addstudent.php',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 5,
    maxFiles: 5,
    maxFilesize: 1,
    acceptedFiles: 'image/*',
    addRemoveLinks: true,

    init: function() {
        dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

        // for Dropzone to process the queue (instead of default form behavior):
        document.getElementById("submit-all").addEventListener("click", function(e) {
            // Make sure that the form isn't actually being sent.
            e.preventDefault();
            e.stopPropagation();
            dzClosure.processQueue();
        });
        //send all the form data along with the files:
        this.on("sendingmultiple", function(data, xhr, formData) {
            formData.append("stfname", jQuery("#stfname").val());
            formData.append("stlname", jQuery("#stlname").val());
            formData.append("stmname", jQuery("#stmname").val());
            formData.append("stenrolid", jQuery("#stenrolid").val());
            formData.append("stgender", jQuery("#stgender").val());
            formData.append("stclass", jQuery("#stclass").val());
            formData.append("stsection", jQuery("#stsection").val());
            formData.append("stdob", jQuery("#stdob").val());
        });           
    }
}
</script>

On submit nothing happens, the page still remains the same no data is posted to POST, I see the image is tick marked after the loading sequence.

My PHP code on the page tells it to post all data and die. But the HTML page isn't change and the link remains the same.

Am I missing something or doing something wrong?

来源:https://stackoverflow.com/questions/50577894/dropzone-is-not-able-to-send-data-to-php

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!