如何使用AJAX通过jquery上传文本值和dropzone值?

时间:2016-12-14 10:34:53

标签: php jquery ajax dropzone.js

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

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;
           });

upload_file.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

2 个答案:

答案 0 :(得分:1)

使用params。 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);
            });
};

答案 1 :(得分:0)

如果有人需要!
我还需要从选择框中传递额外的价值,这种解决方案对我有用(我在这里不使用表格):

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

的身份工作