title: jQuery File Upload - how to send a $_POST[""] variable to UploadHandler.php
body: <p>I am using "<a href="http://blueimp.github.io/jQuery-File-Upload/" rel="nofollow">jquery file upload</a>" script. When a photo is uploaded, this script works with "UploadHandler.php". My question is, how can I send a post/get variable to UploadHandler.php?</p>
  
  <p>Here is my index.php code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;!--
  /*
   * jQuery File Upload Plugin Basic Plus Demo 1.3.0
   * https://github.com/blueimp/jQuery-File-Upload
   *
   * Copyright 2013, Sebastian Tschan
   * https://blueimp.net
   *
   * Licensed under the MIT license:
   * http://www.opensource.org/licenses/MIT
   */
  --&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;!-- Force latest IE rendering engine or ChromeFrame if installed --&gt;
  &lt;!--[if IE]&gt;&lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;&lt;![endif]--&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;jQuery File Upload Demo - Basic Plus version&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;link rel="stylesheet" href="css/bootstrap3.min.css"&gt;
  &lt;link rel="stylesheet" href="css/style.css"&gt;
  &lt;link rel="stylesheet" href="css/jquery.fileupload-ui.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-12"&gt;
  
              &lt;!-- The fileinput-button span is used to style the file input field as button --&gt;
              &lt;span class="btn btn-success fileinput-button"&gt;
                  &lt;i class="icon-plus icon-white"&gt;&lt;/i&gt;
                  &lt;span&gt;Add files...&lt;/span&gt;
                  &lt;!-- The file input field used as target for the file upload widget --&gt;
                  &lt;input id="fileupload" type="file" name="files[]" multiple&gt;
                  &lt;input type="hidden" name="albumTom" value="2"&gt;
              &lt;/span&gt;
              &lt;br&gt;
              &lt;br&gt;
              &lt;!-- The global progress bar --&gt;
              &lt;div id="progress" class="progress"&gt;
                  &lt;div class="progress-bar progress-bar-success"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- The container for the uploaded files --&gt;
              &lt;div id="files" class="files"&gt;&lt;/div&gt;
              &lt;br&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included --&gt;
  &lt;script src="js/vendor/jquery.ui.widget.js"&gt;&lt;/script&gt;
  &lt;!-- The Load Image plugin is included for the preview images and image resizing functionality --&gt;
  &lt;script src="js/load-image.min.js"&gt;&lt;/script&gt;
  &lt;!-- The Canvas to Blob plugin is included for image resizing functionality --&gt;
  &lt;script src="js/canvas-to-blob.min.js"&gt;&lt;/script&gt;
  &lt;!-- Bootstrap JS is not required, but included for the responsive demo navigation --&gt;
  &lt;script src="js/bootstrap3.min.js"&gt;&lt;/script&gt;
  &lt;!-- The Iframe Transport is required for browsers without support for XHR file uploads --&gt;
  &lt;script src="js/jquery.iframe-transport.js"&gt;&lt;/script&gt;
  &lt;!-- The basic File Upload plugin --&gt;
  &lt;script src="js/jquery.fileupload.js"&gt;&lt;/script&gt;
  &lt;!-- The File Upload processing plugin --&gt;
  &lt;script src="js/jquery.fileupload-process.js"&gt;&lt;/script&gt;
  &lt;!-- The File Upload image preview &amp; resize plugin --&gt;
  &lt;script src="js/jquery.fileupload-image.js"&gt;&lt;/script&gt;
  &lt;!-- The File Upload audio preview plugin --&gt;
  &lt;script src="js/jquery.fileupload-audio.js"&gt;&lt;/script&gt;
  &lt;!-- The File Upload video preview plugin --&gt;
  &lt;script src="js/jquery.fileupload-video.js"&gt;&lt;/script&gt;
  &lt;!-- The File Upload validation plugin --&gt;
  &lt;script src="js/jquery.fileupload-validate.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  /*jslint unparam: true, regexp: true */
  /*global window, $ */
  $(function () {
      'use strict';
      // Change this to the location of your server-side upload handler:
      var url = window.location.hostname === 'localhost/best' ?
                  '//localhost/' : 'server/php/',
          uploadButton = $('&lt;button/&gt;')
              .addClass('btn btn-primary')
              .prop('disabled', true)
              .text('Processing...')
              .on('click', function () {
                  var $this = $(this),
                      data = $this.data();
                  $this
                      .off('click')
                      .text('Abort')
                      .on('click', function () {
                          $this.remove();
                          data.abort();
                      });
                  data.submit().always(function () {
                      $this.remove();
                  });
              });
      $('#fileupload').fileupload({
          url: url,
          dataType: 'json',
          autoUpload: false,
          acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/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) {
          data.context = $('&lt;div/&gt;').appendTo('#files');
          $.each(data.files, function (index, file) {
              var node = $('&lt;p/&gt;')
                      .append($('&lt;span/&gt;').text(file.name));
              if (!index) {
                  node
                      .append('&lt;br&gt;')
                      .append(uploadButton.clone(true).data(data));
              }
              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('&lt;br&gt;')
                  .prepend(file.preview);
          }
          if (file.error) {
              node
                  .append('&lt;br&gt;')
                  .append(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);
          $('#progress .progress-bar').css(
              'width',
              progress + '%'
          );
      }).on('fileuploaddone', function (e, data) {
          $.each(data.result.files, function (index, file) {
              var link = $('&lt;a&gt;')
                  .attr('target', '_blank')
                  .prop('href', file.url);
              $(data.context.children()[index])
                  .wrap(link);
          });
      }).on('fileuploadfail', function (e, data) {
          $.each(data.result.files, function (index, file) {
              var error = $('&lt;span/&gt;').text(file.error);
              $(data.context.children()[index])
                  .append('&lt;br&gt;')
                  .append(error);
          });
      }).prop('disabled', !$.support.fileInput)
          .parent().addClass($.support.fileInput ? undefined : 'disabled');
  });
  &lt;/script&gt;
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>