Shipping Details
This Form is created with HTML5 Guriddo Form PHP builder

jqForm class automatically handle File uploads.
You can configure your uploads depending on the own needs very easy using
the setUploadOptions method. See code.
<?php
require_once '../../../php/demo/tabs2.php';
?>
<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
    <title>jqForm PHP Demo</title>
    <link rel="stylesheet" type="text/css" media="screen" href="../../../css/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../../../css/trirand/ui.jqform.css" />    
    <style type="text/css">
        html, body {
        margin: 0;            /* Remove body margin/padding */
        padding: 0;
        /*overflow: hidden;*/    /* Remove scroll bars on browser window */
        font-size: 90%;
        }
        body {
            font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
        }        
        #notsupported  { border: 0px none;}
    </style>
    <script src="../../../js/jquery.min.js" type="text/javascript"></script>
    <script src="../../../js/jquery-ui.min.js" type="text/javascript"></script>    
    <script src="../../../js/jquery.form.js" type="text/javascript"></script>
    <script src="../../../js/modernizr.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(document).ready(function(){
          if(Modernizr.inputtypes.number) {
              jQuery("#supported").append("<div>Your browser support input type: number!</div>");
          } else {
              jQuery("#notsupported").append("<div>Your browser does not support input type: number!</div>").addClass('ui-state-error');
          }
          $("input:submit").css('font-size','1.0em');
      });
    </script>
    
  </head>
  <body>
      <div style="margin-left:20px;margin-right: 20px;">
          <?php include ("fileupload.php");?>
          <div style="text-align: center;margin-top:10px;">This Form is created with HTML5 Guriddo Form PHP builder</div>
      </div>
      <br/>
      <div id="supported"></div>
      <div id="notsupported"></div>
      <?php tabs(array("fileupload.php"));?>
   </body>
</html>
fileupload.php.
<?php
// Include class 
include_once '../jqformconfig.php'
include_once 
$CODE_PATH.'jqForm.php'
// Create instance 
$newForm = new jqForm('newForm',array('method' => 'post''id' => 'newForm'));
// Demo Mode creating connection 
include_once $DRIVER_PATH.'jqGridPdo.php'
$conn = new PDO(DB_DSNDB_USERDB_PASSWORD);
$newForm->setConnection$conn );
// Set url
$newForm->setUrl($SERVER_HOST.$SELF_PATH.'fileupload.php');
// Set Form header 
$formhead='Shipping Details';
$newForm->setFormHeader($formhead,'ui-icon-mail-closed');
// Set parameters 
$jqformparams = array();
// Set SQL Command, table, keys 
$newForm->table 'orders';
$newForm->setPrimaryKeys('OrderID');
$newForm->serialKey true;
// Set Form layout 
$newForm->setColumnLayout('twocolumn');
$newForm->setTableStyles('width:100%;','','');
// Add elements
$newForm->addElement('OrderID','hidden', array('label' => 'OrderID''id' => 'newForm_OrderID'));
$newForm->addElement('ShipName','text', array('label' => 'Name''maxlength' => '40''style' => 'width:98%;''id' => 'newForm_ShipName'));
$newForm->addElement('ShipAddress','text', array('label' => 'Address''maxlength' => '60''style' => 'width:98%;''id' => 'newForm_ShipAddress'));
$newForm->addElement('ShipCity','text', array('label' => 'City''maxlength' => '15''size' => '20''id' => 'newForm_ShipCity'));
$newForm->addElement('ShipPostalCode','text', array('label' => 'PostalCode''maxlength' => '10''size' => '20''id' => 'newForm_ShipPostalCode'));
$newForm->addElement('ShipCountry','text', array('label' => 'Country''maxlength' => '15''size' => '20''id' => 'newForm_ShipCountry'));
$newForm->addElement('Freight','number', array('label' => 'Freight''id' => 'newForm_Freight'));
$newForm->addElement('newFile','file', array('label' => 'Attachment''id' => 'newForm_newFile'));
$elem_9[]=$newForm->createElement('newSubmit','submit', array('value' => 'Submit'));
$newForm->addGroup("newGroup",$elem_9, array('style' => 'text-align:right;''id' => 'newForm_newGroup'));
// automatic file upload options
$newForm->setUploadOptions('newFile', array(
    
'dir'=>'./',        // directory to upload
    
'filetypes'=>'',    // allowed file types. if empty all
    
'filesize'=>1048576,// bytes 1024*1024 = 1Mb
    
'fileprefix'=>''    // add a prefix to the file name
));
// Add events
// Add ajax submit events
$success = <<< SU
function( response, status, xhr) {
$("#demo").html(response);
}
SU;
$newForm->setAjaxOptions( array('dataType'=>null,
'resetForm' =>null,
'clearForm' => null,
'success' =>'js:'.$success,
'iframe' => true,
'forceSync' =>false) );
// Demo mode - no input 
$newForm->demo true;
// Render the form 
echo $newForm->renderForm($jqformparams);
?>