Ajax Upload, Diseño de jQuery, Sage

el

Ajax Upload

Hay algunas consideraciones especiales. Puede ser útil un esquema como el siguiente: 

$('#uploader').on('submit', function(e) {
  e.preventDefault();

  var data = new FormData($(this)[0]);
  
  $.ajax({
    type: 'POST',
    url: 'upload.php',
    enctype: 'multipart/form-data',
    data: data,
    success: function(result) {
      ...
    },
    //Options to tell JQuery not to process data or worry about content-type
    cache: false,
    contentType: false,
    processData: false
  });

});

Sin embargo, he notado que no funciona en IE9.

Se puede resolver la compatibilidad con jquery.form:

$('#uploader').ajaxForm({
  beforeSend: function() {
    status.empty();
    var percentVal = '0%';
    bar.width(percentVal);
    percent.html(percentVal);
  },
  uploadProgress: function(event, position, total, percentComplete) {
    var percentVal = percentComplete + '%';
    bar.width(percentVal);
    percent.html(percentVal);
  },
  complete: function(xhr) {
    if (xhr.responseText != null) {
      var result = $.parseJSON(xhr.responseText);
      ...
    }
  }
});

donde el formulario es:

<form id="uploader" action="php/upload.php" method="post" enctype="multipart/form-data" >
  <input type="file" name="file" id="file">
  <input type="submit" value="Subir">
  <div id="result"></div>
</form>

<div class="progress">
  <div class="bar"></div >
  <div class="percent">0%</div >
</div>

y los estilos para la barra de progreso:

.progress { position:relative; width:100px; height:18px; background: #ddd; padding: 0;}
.bar { background-color: #B4F5B4; width:0%; height:20px;}
.percent { position:absolute; top:0; left:0; width:100px; height:18px; line-height:18px; text-align:center;}

Referencias:
stackoverflow.com: How can I upload files asynchronously with jQuery?
jQuery Form Plugin: Code Samples: File Upload

Diseño de jQuery

Una explicación de su diseño:
http://www.sagemath.org/ es software libre para matemáticas, alternativa a Mathematica y Matlab.