如何使用 AJAX 通过 jquery 上传文本值和 dropzone 值？答案

【问题标题】：How to upload a text value along with dropzone values through jquery,using AJAX?如何使用 AJAX 通过 jquery 上传文本值和 dropzone 值？
【发布时间】：2017-04-29 15:40:33
【问题描述】：

我在 div 中有一个 textarea 元素、dropdownlist 元素和一个 dropzone 区域。图像、视频、pdf 文件已成功上传到上传文件夹（没有问题）。文本区域和下拉值也已成功插入数据库通过 jquery 和 ajax 文件，单击提交按钮时（提交按钮适用于 jquery）。我的要求是，如何通过 Jquery AJAX 发送 dropzone 文件值（通过发送文本区域和下拉值的相同 jquery AJAX）上提交按钮点击事件...

html代码：

<div class="panel">

                 <textarea placeholder="Hi!"  class="form-control input-lg p-text-area" name="update" id="update" ></textarea>



              <div class="panel-footer">
                         <ul class="nav nav-pills">
                      <li><select name="selectcategory" id="selectcategory" required>
<option value="">----select category-----</option>
<option value="option1">1</option>
<option value="option2">2</option>
<option value="option3">3</option>
<option value="option4">4</option>

</select></li>
<input type="submit"  value="Update" name="update"  id="u" class="btn btn-info pull-right update_button">



<li> <form action="upload_file.php" class="dropzone">
                                            <div class="fallback">
<input name="file" type="file" multiple />
 </div>
 </form>
  <a href="javascript:void(0)" id="camerabutton" title="Upload Image"><i class=" fa fa-camera"></i></a> 
                      </li>

                  </ul> 

                </div>

        </div>

jquery 代码：

      /* Update Button Click */
      $(".update_button").click(function()

    {
       var updateval = $("#update").val();
       var cate=$("#selectcategory").val();
       var dataString = 'update='+updateval+'&Category='+cate;
       if($.trim(updateval).length==0 && $.trim(cate).length==0)
        { 
            alert('ENTER SOME TEXT!!');
         }
        else
            {

           $.ajax({
                    type: "POST",
                     url: $.base_url+"message_ajax.php",
                    data: dataString,
                    cache: false,
                  success: function(html)
         {

            $("#update").val('').focus();

            $("#selectcategory").val('');
          //var c=$('#update_count').html();
         //$('#update_count').html(parseInt(c)+1);

           $(".dropzone").hide();
             }
           });
               }
            return false;
           });

上传文件.php

<?php
  $ds          = DIRECTORY_SEPARATOR;  //1

       $storeFolder = 'uploads';   //2

    if (!empty($_FILES)) {

$tempFile = $_FILES['file']['tmp_name'];          //3             

$targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;  //4

$targetFile =  $targetPath. $_FILES['file']['name'];  //5

move_uploaded_file($tempFile,$targetFile); //6

     }
  ?>

我使用的 dropzone 文件：

dropzone-amd-module.js

【问题讨论】：

标签： php jquery ajax dropzone.js

【解决方案1】：

使用参数。 http://www.dropzonejs.com/#params

Dropzone.options.dropzoneBox = {
        url: 'url here',
        params: {
            new_value: 'value'
        },
        init: function(){
            this.on('success', function (data, xhr) {
                console.log(data, xhr);
            });
};

【讨论】：

【解决方案2】：

如果有人需要！
我还需要从选择框中传递额外的值，这个解决方案对我有用（我在这里不使用表单）：

Dropzone.options.myDropzone = {

        url: "upload.php",        

        autoProcessQueue: true,
        width: 300,
        height: 300, 
        maxFilesize: 30,
        progressBarWidth: '100%',   

        init: function () {

            this.on("sending",function(file,xhr,data){
                data.append("fileCategory",$('#fileCategory').val());
            });

            this.on("complete", function (file) {
                //some action here
            });
        }

};

fileCategory 以$_POST 工作

【讨论】：