jQuery文件上传，传递额外的表格数据

Question

我想在人们上传pdf时将额外的数据传递给我的数据库。

所以我有2个单选按钮的2种类型的文件。 当我上传文件时，如何将'doctype'添加到我的数据库中。 我已阅读此https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-Form-Data这要上传，但我不知道如何添加额外的数据

在此先感谢。

这不是所有的代码，只是用于上传的部分。

<div id="filesic" class="files"></div> 
            <br /> 
            <input type="submit" id="submit_easy_docs" class="btn btn-success btn-lg btn-block" value="Gem filer i easyPX" /> 
            <input type="radio" name="doctype" value="1">praktik<br> 
            <input type="radio" name="doctype" value="2">karakter</div> 
           </div> 
          </form> 
         </div> 
        </div> 
      </section> 
      </aside><!-- /.right-side --> 
     </div><!-- ./wrapper --> 

     <script src="js/jquery-1.11.0.min.js"> </script> 
     <script src="js/jquery-ui-1.10.3.min.js" type="text/javascript"></script> 
     <script src="js/bootstrap.min.js" type="text/javascript"></script> 
     <script src="js/app.js" type="text/javascript"></script> 
      <!-- The Iframe Transport is required for browsers without support for XHR file uploads --> 
     <script src="js/jquery.iframe-transport.js"></script> 
     <!-- The basic File Upload plugin --> 
     <script src="js/jquery.fileupload.js"></script> 

     <script> 
     $(document).ready(function(){ 
      $("#easy_upload").boxRefreshGetTestFromJour({ 
        source: "ajax/easyPx_upload_fins_tests.php", 
          param: "#jourNo" 
       }); 
       $.ajaxSetup ({ 
        // Disable caching of AJAX responses 
        cache: false 
        }); 
       $("input[type='checkbox'], input[type='radio']").iCheck({ 
        checkboxClass: 'icheckbox_minimal', 
        radioClass: 'iradio_minimal' 
        }); 
       $('#upload_f').hide(); 
       /*$("#jourNo").keydown(function(event){ 
        if(event.keyCode == 13 || event.keyCode == 9){ 
         $(".Seach-btn").click(); 
        } 
       });*/ 



$('#jourNo').keypress(function (e) { 
    c = e.which ? e.which : e.keyCode; 
    if (c == 13) { 
    $(".Seach-btn").click(); 
    e.preventDefault(); 
    return false; //<---- Add this line 
    } 
}); 
     }); 
     </script> 
     <script> 
     $(function() { 
      'use strict'; 
      // Change this to the location of your server-side upload handler: 
      var count = 1; 
      var url = 'upload/php/', 

      uploadButton = $('<button/>') 
      .addClass('btn btn-primary') 
      .prop('disabled', false) 
      .text('Upload ...') 
      .on('click', function() { 
       var $this = $(this), 
        data = $this.data(); 
       $this 
        .off('click') 
        .text('Fortryd') 
        .on('click', function() { 
         $this.remove(); 
         data.abort(); 
        }); 
       data.submit().always(function() { 
        $this.remove(); 
       }); 
      }); 
      /*UPLOAD AF INDSCANNEDE DOKUMENTER*/ 
     $('#fileuploadic').fileupload({ 
      url: url, 
      dataType: 'json', 
      autoUpload: true, 
      acceptFileTypes: /(\.|\/)(gif|jpe?g|png|pdf)$/i, 
      maxFileSize: 5000000, // 5 MB 
      // Enable image resizing, except for Android and Opera, 
      // which actually support image resizing, but fail to 
      // send Blob objects via XHR requests: 
      disableImageResize: /Android(?!.*Chrome)|Opera/ 
       .test(window.navigator.userAgent), 
      previewMaxWidth: 100, 
      previewMaxHeight: 100, 
      previewCrop: true 
     }).on('fileuploadadd', function (e, data) { 
      //$('#progressic').show(); 
      $('#progress-bar-procent').css('color','#000'); 
      data.context = $('<div/>').appendTo('#filesic'); 
      $.each(data.files, function (index, file) { 
       var node = $('<p/>') 
         .append($('<span/>').text(file.name)); 
       node.appendTo(data.context); 
      }); 
     }).on('fileuploadprocessalways', function (e, data) { 
      var index = data.index, 
       file = data.files[index], 
       node = $(data.context.children()[index]); 
      if (file.preview) { 
       node 
        .prepend('<br>') 
        .prepend(file.preview); 
      } 
      if (file.error) { 
       node 
        .append('<br>') 
        .append($('<span class="text-danger"/>').text(file.error)); 
      } 
      if (index + 1 === data.files.length) { 
       data.context.find('button') 
        .text('Upload') 
        .prop('disabled', !!data.files.error); 
      } 
     }).on('fileuploadprogressall', function (e, data) { 
      var progress = parseInt(data.loaded/data.total * 100, 10); 
      if(progress == 100) $('#progressic').hide(); 
      else $('#progressic').show(); 
      $('#progress-bar-procent').html(Math.round(progress)+'%'); 
      if(Math.round(progress >58)){ 
       $('#progress-bar-procent').css('color','#fff'); 
      } 
      $('#progressic .progress-bar').css(
       'width', 
       progress + '%' 
      ); 

     }).on('fileuploaddone', function (e, data) { 

       var fileCon = $('#fileuploadic'); 

      $.each(data.result.files, function (index, file) { 
       if (file.url) { 

        var link = $('<a>') 
         .attr('target', '_blank') 
         .prop('href', file.url) 
         .prop('id',index); 
        $(data.context.children()[index]) 
         //.append('<a href="'+ file.url +'" target="_blank">'+file.name+'</a>') 
         .wrap(link); 

         $(data.context[index]).prepend('<button class="btn btn-danger btn-xs pull-right deleteimg" id="del_'+count+'" title="" data-toggle="tooltip" data-original-title="Slet"><i class="fa fa-times"></i></button>'); 
         $(data.context[index]).append('<input type="hidden" id="file_'+count +'" name="files[]" value="upload/php/files/'+file.name+'" />'); 
         $('.deleteimg').on('click', function(event){ 
          if($('input[name="files[]"]').length <= 2) $('#submit_easy_docs').attr('disabled', true); 
          else $('#submit_easy_docs').attr('disabled', false); 

          $(this).next('a').remove(); 
          $(this).next('input').remove(); 
          $(this).remove(); 

         }); 

        //$('<p/>').html('<input type="hidden" id="file_'+count +'" name="files[]" value="upload/php/files/'+file.name+'" />').appendTo(fileCon); 
        count = count +1 ; 

       } else if (file.error) { 
        var error = $('<span class="text-danger"/>').text(file.error); 
        $(data.context.children()[index]) 
         .append('<br>') 
         .append(error); 
       } 
      }); 
      $('#submit_easy_docs').removeAttr('Disabled'); 
     });  


     }).on('fileuploadfail', function (e, data) { 
      $.each(data.files, function (index, file) { 
       var error = $('<span class="text-danger"/>').text('File upload failed.'); 
       $(data.context.children()[index]) 
        .append('<br>') 
        .append(error); 
      }); 
     }).prop('disabled', !$.support.fileInput) 
      .parent().addClass($.support.fileInput ? undefined : 'disabled'); 

</script> 

    </body> 
</html> 

Answer 1

尝试添加该事件如图文档https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-Form-Data#setting-formdata-on-upload-start

$('#fileuploadic').bind('fileuploadsubmit', function (e, data) { 
    var doctype = $('input[name=doctype]:checked'); 
    // selecting each input with name "doctype" property checked true 
    data.formData = {doctype: doctype.val()}; 

    /* 
     the action above set the formData option from the fileupload object 
     and its the same as the following code... but its dynamically done 
     $('#fileupload').fileupload({ 
      formData: {example: 'test'} 
     }); 
    */ 
}); 

前。从文档“formData对象，formData：{example2：'test'}将作为POST参数到达服务器端”