Com HTML5 Você pode fazer uploads de arquivos com Ajax e jQuery. Não só isso, você pode fazer validações de arquivos (Nome, tamanho e tipo MIME) ou lidar com o evento de progresso com a tag de progresso HTML5 (ou um div). Recentemente eu tive que fazer um uploader de arquivos, mas eu não queria usar Flash nem Iframes ou plugins e depois de alguma pesquisa eu cheguei com a solução.

O HTML:

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

$(':file').on('change', function() {
    var file = this.files[0];
    if (file.size > 1024) {
        alert('max upload size is 1k')
    }

    // Also see .name, .type
});

Agora o Ajax submete com o botão do clique:

$(':button').on('click', function() {
    $.ajax({
        // Your server script to process the upload
        url: 'upload.php',
        type: 'POST',

        // Form data
        data: new FormData($('form')[0]),

        // Tell jQuery not to process data or worry about content-type
        // You *must* include these options!
        cache: false,
        contentType: false,
        processData: false,

        // Custom XMLHttpRequest
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                // For handling the progress of the upload
                myXhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        $('progress').attr({
                            value: e.loaded,
                            max: e.total,
                        });
                    }
                } , false);
            }
            return myXhr;
        }
    });
});

• Ficheiro JQuery Uploader
• 'Plugin' De Envio De Vários Ficheiros
• Envio Mini-Múltiplo De Ficheiros
• envio do ficheiro jQuery

Poderá procurar por mais projectos no NPM (usando o 'plugin' jquery) como a palavra-chave) ou no Github.

Actualização de 2017: ainda depende dos navegadores das suas utilizações demográficas.

Uma coisa importante a entender com a "nova" API HTML5 {[[0]} é que não foi suportada até IE 10. Se o mercado específico que você pretende tem uma prepensidade superior à média para versões mais antigas do Windows, você pode não ter acesso a ele.

Indo para 2017, cerca de 5% dos navegadores são um dos IE 6, 7, 8 ou 9. Se você se dirigir para uma grande empresa (eg isto é uma ferramenta B2B, ou algo que você está entregando para treinamento) esse número pode rocket. Apenas alguns meses atrás-em 2016-eu lidei com uma empresa usando IE8 em mais de 60% de suas máquinas.

Por isso, antes de fazer qualquer coisa: verifique qual o navegador que os seus utilizadores usam. Se não o fizer, aprenderá uma lição rápida e dolorosa sobre o porquê de "trabalha para mim" não ser suficientemente bom para entregar a um cliente.

A minha resposta de 2008 segue-se.

Se precisar de vários file-uploads, é melhor fazer cada arquivo um de cada vez (para superar os limites máximos de upload de arquivos). Postar o primeiro formulário para o iframe, monitorar seu progresso usando o acima e quando tiver terminado, postar o segundo formulário para o iframe, e assim por diante.

Ou usar uma solução Java / Flash. Eles são muito mais flexíveis no que eles podem fazer com seus posts...

Recomendo a utilização do pluginFine Uploader para este fim. O seu código JavaScript seria:

$(document).ready(function() {
  $("#uploadbutton").jsupload({
    action: "addFile.do",
    onComplete: function(response){
      alert( "server response: " + response);
    }
  });
});

Nota: Esta resposta está desactualizada, sendo agora possível enviar ficheiros usando o XHR.

Não pode enviar ficheiros com XMLHttpRequest (Ajax). Você pode simular o efeito usando um iframe ou Flash. O Excelente Plugin de formulário jquery que publica os seus ficheiros através de um iframe para obter o efeito.

Este ficheiro AJAX envia o 'plugin' jQuery carrega o ficheiro somehwere, e passa o resposta a uma chamada, nada mais.

• não depende de HTML específico, basta dar-lhe um <input type="file">
• não requer que o seu servidor responda de nenhuma forma em particular
• não importa quantos arquivos você usa, ou onde eles estão na página

-- Use tão pouco como --

$('#one-specific-file').ajaxfileupload({
  'action': '/upload.php'
});

-- ou tanto quanto --

$('input[type="file"]').ajaxfileupload({
  'action': '/upload.php',
  'params': {
    'extra': 'info'
  },
  'onComplete': function(response) {
    console.log('custom handler for file:');
    alert(JSON.stringify(response));
  },
  'onStart': function() {
    if(weWantedTo) return false; // cancels upload
  },
  'onCancel': function() {
    console.log('no file selected');
  }
});

Com HTML5

Você pode enviar ficheiros com o jQuery usando o método $.ajax() se FormData e a Api for suportada (ambas as funcionalidades do HTML5).

Você também pode enviar arquivos sem FormData mas, de qualquer forma a API de Arquivo deve estar presente para processar arquivos de tal forma que eles podem ser enviados com XMLHttpRequest (Ajax).

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  data: new FormData($('#formWithFiles')[0]), // The form with the file inputs.
  processData: false,
  contentType: false                    // Using FormData, no need to process data.
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

Para um JavaScript rápido e puro ( no jQuery ) exemplo veja " enviando arquivos usando um objeto FormData ".

Recuo

Quando o HTML5 não é suportado (no File API) a única outra solução de JavaScript pura (no Flash} ou qualquer outro plugin de navegador) é a técnica hidden iframe, que permite emular um pedido assíncrono sem usar o objecto XMLHttpRequest.

Consiste em definir uma iframe como alvo da forme com as entradas do arquivo. Quando o usuário submete um pedido é feito e os arquivos são enviados, mas a resposta é exibida dentro do iframe em vez de voltar a renderização da página principal. Esconder o iframe torna todo o processo transparente para o Usuário e emula um pedido assíncrono.

Se for feito correctamente, deve funcionar virtualmente em qualquer navegador, mas tem algumas reservas quanto à forma de obter a resposta a partir do iframe.

Neste caso, poderá preferir usar um 'plugin' de envoltório como Bifröst que usa a técnica iframe mas também fornece um jQuery Ajax transport permitindo enviar ficheiros apenas com o método $.ajax() como este:

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  // Set the transport to use (iframe means to use Bifröst)
  // and the expected data type (json in this case).
  dataType: 'iframe json',                                
  fileInputs: $('input[type="file"]'),  // The file inputs containing the files to send.
  data: { msg: 'Some extra data you might need.'}
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

Plugins

Bifröst é apenas um wrapper que adiciona o suporte de fallback para jQuery, ajax do método, mas muitos dos citados plugins como o jQuery Form Plugin ou jQuery Upload de Arquivo incluir a pilha inteira do HTML5 para diferentes alternativas e algumas características úteis para facilitar o processo. Dependendo de suas necessidades e requisitos você pode querer considerar uma implementação nua ou qualquer um destes plugins.

HTML

<input id="file" type="file" name="file"/>
<div id="response"></div>

JavaScript

jQuery('document').ready(function(){
    var input = document.getElementById("file");
    var formdata = false;
    if (window.FormData) {
        formdata = new FormData();
    }
    input.addEventListener("change", function (evt) {
        var i = 0, len = this.files.length, img, reader, file;

        for ( ; i < len; i++ ) {
            file = this.files[i];

            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) {
                        //showUploadedItem(e.target.result, file.fileName);
                    };
                    reader.readAsDataURL(file);
                }

                if (formdata) {
                    formdata.append("image", file);
                    formdata.append("extra",'extra-data');
                }

                if (formdata) {
                    jQuery('div#response').html('<br /><img src="ajax-loader.gif"/>');

                    jQuery.ajax({
                        url: "upload.php",
                        type: "POST",
                        data: formdata,
                        processData: false,
                        contentType: false,
                        success: function (res) {
                         jQuery('div#response').html("Successfully uploaded");
                        }
                    });
                }
            }
            else
            {
                alert('Not a vaild image!');
            }
        }

    }, false);
});

Explicação

Eu uso o response {[[2]} para mostrar a animação de envio e a resposta após o envio ser feito.

A melhor parte é que você pode enviar dados extra como ids & etc com o arquivo quando você usar este script. Tenho de o mencionar como no guião.

Ao nível do PHP isto irá funcionar como envio normal de ficheiros. extra-dados podem ser retrieved as $_POST data.

Aqui você não está usando um plugin e coisas. Podes mudar o código como quiseres. Não estás a codificar cegamente. Esta é a funcionalidade principal de qualquer arquivo jquery upload. Na Verdade, Javascript.

1. Plupload
   • docs: http://www.plupload.com/docs
2. envio do ficheiro jQuery
   • docs: https://github.com/blueimp/jQuery-File-Upload
3. FineUploader
   • docs: http://docs.fineuploader.com/

Pode enviar simplesmente com o jQuery .ajax().

HTML:

<form id="upload-form">
    <div>
        <label for="file">File:</label>
        <input type="file" id="file" name="file" />
        <progress class="progress" value="0" max="100"></progress>
    </div>
    <hr />
    <input type="submit" value="Submit" />
</form>

CSS

.progress { display: none; }

Javascript:

$(document).ready(function(ev) {
    $("#upload-form").on('submit', (function(ev) {
        ev.preventDefault();
        $.ajax({
            xhr: function() {
                var progress = $('.progress'),
                    xhr = $.ajaxSettings.xhr();

                progress.show();

                xhr.upload.onprogress = function(ev) {
                    if (ev.lengthComputable) {
                        var percentComplete = parseInt((ev.loaded / ev.total) * 100);
                        progress.val(percentComplete);
                        if (percentComplete === 100) {
                            progress.hide().val(0);
                        }
                    }
                };

                return xhr;
            },
            url: 'upload.php',
            type: 'POST',
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            success: function(data, status, xhr) {
                // ...
            },
            error: function(xhr, status, error) {
                // ...
            }
       });
    }));
});

var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
    var percent = (e.position/ e.totalSize);
    // Render a pretty progress bar
};
xhr.onreadystatechange = function(e) {
    if(this.readyState === 4) {
        // Handle file upload complete
    }
};
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('X-FileName',file.name); // Pass the filename along
xhr.send(file);

A forma mais simples e robusta como fiz isto no passado, é simplesmente apontar para uma marca iFrame escondida com o seu formulário - então irá submeter-se dentro da iframe sem carregar de novo a página.

Isto é, se não quiser usar um plugin, JavaScript ou qualquer outra forma de "magia" que não o HTML. Claro que você pode combinar isso com JavaScript ou o que você tem...

<form target="iframe" action="" method="post" enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>

<iframe name="iframe" id="iframe" style="display:none" ></iframe>

Também pode ler o conteúdo da iframe onLoad para erros do servidor ou respostas de sucesso e depois envia isso para o utilizador.

Chrome, iFrames e onLoad

-nota - só precisa de continuar a ler se estiver interessado em como configurar um bloqueador UI ao fazer o upload/download

De momento, o Chrome não activa o evento onLoad para o iframe quando é usado para transferir ficheiros. Firefox, IE, e Edge todos disparam o evento onload para transferências de arquivos.

A fazer que, basicamente, quando o envio/transferência é iniciado:

• [lado do cliente] iniciar um intervalo para procurar a existência de um cookie
• [lado do servidor] faça o que for preciso com os dados do ficheiro
• [lado do servidor] definir o cookie para o intervalo do lado do cliente
O intervalo vê o cookie e usa-o como o evento onLoad. Por exemplo, você pode iniciar um bloqueador UI e, em seguida, onLoad ( ou quando cookie é feito ) você remover o bloqueador UI.

Utilizando um a bolacha para isto é feia, mas funciona.

Fiz um plugin jQuery para lidar com este problema para o Chrome ao Transferir, você pode encontrar aqui

Https://github.com/ArtisticPhoenix/jQuery-Plugins/blob/master/iDownloader.js

O mesmo princípio básico também se aplica ao Upload.

Para usar o descarregador (incluir o JS, obviamente)

 $('body').iDownloader({
     "onComplete" : function(){
          $('#uiBlocker').css('display', 'none'); //hide ui blocker on complete
     }
 });

 $('somebuttion').click( function(){
      $('#uiBlocker').css('display', 'block'); //block the UI
      $('body').iDownloader('download', 'htttp://example.com/location/of/download');
 });

 setcookie('iDownloader', true, time() + 30, "/");

A o 'plugin' irá ver o 'cookie' e, em seguida, activar a chamada de resposta onComplete.

Uma solução que encontrei foi ter o {[[0]} alvo numa iFrame escondida. O iFrame pode então executar JS para mostrar ao usuário que está completo (na carga de página).

Escrevi isto num ambiente de trilhos. É apenas cerca de cinco linhas de JavaScript, se você usar o plugin lightweight jQuery-form.

O desafio é fazer o upload do AJAX funcionar porque o padrão remote_form_for não compreende a submissão de formulários multi-partes. Ele não vai enviar o arquivo data Rails procura de volta com o pedido AJAX.

<% remote_form_for(:image_form, 
                   :url => { :controller => "blogs", :action => :create_asset }, 
                   :html => { :method => :post, 
                              :id => 'uploadForm', :multipart => true }) 
                                                                        do |f| %>
 Upload a file: <%= f.file_field :uploaded_data %>
<% end %>

$('#uploadForm input').change(function(){
 $(this).parent().ajaxSubmit({
  beforeSubmit: function(a,f,o) {
   o.dataType = 'json';
  },
  complete: function(XMLHttpRequest, textStatus) {
   // XMLHttpRequest.responseText will contain the URL of the uploaded image.
   // Put it in an image element you create, or do with it what you will.
   // For example, if you have an image elemtn with id "my_image", then
   //  $('#my_image').attr('src', XMLHttpRequest.responseText);
   // Will set that image tag to display the uploaded image.
  },
 });
});

 @image = Image.new(params[:image_form])
 @image.save
 render :text => @image.public_filename

Um simples Uploader Ajax é outra opção:

Https://github.com/LPology/Simple-Ajax-Uploader

• Cross-browser -- works in IE7+, Firefox, Chrome, Safari, Opera
• Suporta vários uploads simultâneos -- mesmo em navegadores não HTML5
• nenhum flash ou CSS externo -- apenas um ficheiro Javascript 5Kb
• opcional, suporte incorporado para barras de progresso do navegador transversal completo (usando a extensão APC do PHP)
Flexível e altamente personalizável -- use qualquer elemento como botão de envio, estilo os seus próprios indicadores de progresso
• não são necessários formulários, basta indicar um elemento que irá servir como botão de envio
• licença MIT -- livre para usar no projeto comercial

Uso de exemplo:

var uploader = new ss.SimpleUpload({
    button: $('#uploadBtn'), // upload button
    url: '/uploadhandler', // URL of server-side upload handler
    name: 'userfile', // parameter name of the uploaded file
    onSubmit: function() {
        this.setProgressBar( $('#progressBar') ); // designate elem as our progress bar
    },
    onComplete: function(file, response) {
        // do whatever after upload is finished
    }
});

O JQuery Uploadify é outro bom plugin que usei antes para enviar ficheiros. O código JavaScript é tão simples quanto o seguinte: código. No entanto, a nova versão não funciona no Internet Explorer.

$('#file_upload').uploadify({
    'swf': '/public/js/uploadify.swf',
    'uploader': '/Upload.ashx?formGuid=' + $('#formGuid').val(),
    'cancelImg': '/public/images/uploadify-cancel.png',
    'multi': true,
    'onQueueComplete': function (queueData) {
        // ...
    },
    'onUploadStart': function (file) {
        // ...
    }
});

Eu fiz um monte de pesquisa e eu cheguei a outra solução para o upload de arquivos sem qualquer plugin e apenas com ajax. A solução é a seguinte:

$(document).ready(function () {
    $('#btn_Upload').live('click', AjaxFileUpload);
});

function AjaxFileUpload() {
    var fileInput = document.getElementById("#Uploader");
    var file = fileInput.files[0];
    var fd = new FormData();
    fd.append("files", file);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", 'Uploader.ashx');
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
             alert('success');
        }
        else if (uploadResult == 'success')
            alert('error');
    };
    xhr.send(fd);
}

Aqui está apenas outra solução de como enviar o arquivo (sem qualquer plugin)

Usando Javascripts simples e AJAX (com barra de progresso)

Parte HTML

<form id="upload_form" enctype="multipart/form-data" method="post">
    <input type="file" name="file1" id="file1"><br>
    <input type="button" value="Upload File" onclick="uploadFile()">
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
    <h3 id="status"></h3>
    <p id="loaded_n_total"></p>
</form>

Parte JS

function _(el){
    return document.getElementById(el);
}
function uploadFile(){
    var file = _("file1").files[0];
    // alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "file_upload_parser.php");
    ajax.send(formdata);
}
function progressHandler(event){
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}
function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}

Componente de PHP

<?php
$fileName = $_FILES["file1"]["name"]; // The file name
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["file1"]["type"]; // The type of file it is
$fileSize = $_FILES["file1"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true
if (!$fileTmpLoc) { // if file not chosen
    echo "ERROR: Please browse for a file before clicking the upload button.";
    exit();
}
if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){ // assuming the directory name 'test_uploads'
    echo "$fileName upload is complete";
} else {
    echo "move_uploaded_file function failed";
}
?>

Aqui está a aplicação exemplo

var formData=new FormData();
formData.append("fieldname","value");
formData.append("image",$('[name="filename"]')[0].files[0]);

$.ajax({
    url:"page.php",
    data:formData,
    type: 'POST',
    dataType:"JSON",
    cache: false,
    contentType: false,
    processData: false,
    success:function(data){ }
});

Pode usar os dados do formulário para publicar todos os seus valores, incluindo imagens.

Para enviar o ficheiro assíncronamente com o Jquery use abaixo dos passos:

Passo 1 no seu projecto, abra o Gestor de Nuget e adicione o pacote (jquery fileupload(só precisa de O escrever no campo de pesquisa que irá aparecer e instalá-lo.)) URL: https://github.com/blueimp/jQuery-File-Upload

Passo 2 adicionar os programas abaixo nos ficheiros HTML, os quais já são adicionados ao projecto ao executar acima do pacote:

Jquery.ui.elemento.js Jquery.iframe-transport.js Jquery.fileupload.js

Passo 3 gravar o controlo de envio de ficheiros de acordo com o código abaixo:

<input id="upload" name="upload" type="file" />

Passo 4 Escreva um método js como uploadFile abaixo:

 function uploadFile(element) {

            $(element).fileupload({

                dataType: 'json',
                url: '../DocumentUpload/upload',
                autoUpload: true,
                add: function (e, data) {           
                  // write code for implementing, while selecting a file. 
                  // data represents the file data. 
                  //below code triggers the action in mvc controller
                  data.formData =
                                    {
                                     files: data.files[0]
                                    };
                  data.submit();
                },
                done: function (e, data) {          
                   // after file uploaded
                },
                progress: function (e, data) {

                   // progress
                },
                fail: function (e, data) {

                   //fail operation
                },
                stop: function () {

                  code for cancel operation
                }
            });

        };

Passo 5 no ficheiro do elemento de chamada de funções pronto para iniciar o processo de acordo com o seguinte:

$(document).ready(function()
{
    uploadFile($('#upload'));

});

Passo 6 Write MVC controller and Action as per below:

public class DocumentUploadController : Controller
    {       

        [System.Web.Mvc.HttpPost]
        public JsonResult upload(ICollection<HttpPostedFileBase> files)
        {
            bool result = false;

            if (files != null || files.Count > 0)
            {
                try
                {
                    foreach (HttpPostedFileBase file in files)
                    {
                        if (file.ContentLength == 0)
                            throw new Exception("Zero length file!");                       
                        else 
                            //code for saving a file

                    }
                }
                catch (Exception)
                {
                    result = false;
                }
            }


            return new JsonResult()
                {
                    Data=result
                };


        }

    }

Converter o ficheiro para base64 usando o readAsDataURL () ou algum codificador base64 . Aqui Violino.

var reader = new FileReader();

        reader.onload = function(readerEvt) {
            var binaryString = readerEvt.target.result;
            document.getElementById("base64textarea").value = btoa(binaryString);
        };

        reader.readAsBinaryString(file);

Depois para recuperar:

window.open("data:application/octet-stream;base64," + base64);

Você pode ver uma solução resolvida com uma demonstração de trabalhotoma. Isso permite visualizar e enviar arquivos de formulário para o servidor. Para o seu caso, terá de usar o Ajax para facilitar o envio do ficheiro para o servidor:

<from action="" id="formContent" method="post" enctype="multipart/form-data">
    <span>File</span>
    <input type="file" id="file" name="file" size="10"/>
    <input id="uploadbutton" type="button" value="Upload"/>
</form>

Os dados apresentados são dados de forma. No seu jQuery, use uma função de envio de formulário em vez de um botão Clique para enviar o arquivo de formulário como mostrado abaixo.

$(document).ready(function () {
   $("#formContent").submit(function(e){

     e.preventDefault();
     var formdata = new FormData(this);

 $.ajax({
     url: "ajax_upload_image.php",
     type: "POST",
     data: formdata,
     mimeTypes:"multipart/form-data",
     contentType: false,
     cache: false,
     processData: false,
     success: function(){

     alert("successfully submitted");

     });
   });
});

Ver mais detalhes

Amostra: se usar o jQuery, poderá fazer um ficheiro de envio fácil. Este é um plugin jQuery pequeno e forte, http://jquery.malsup.com/form/.

Exemplo

var $bar   = $('.ProgressBar');
$('.Form').ajaxForm({
  dataType: 'json',

  beforeSend: function(xhr) {
    var percentVal = '0%';
    $bar.width(percentVal);
  },

  uploadProgress: function(event, position, total, percentComplete) {
    var percentVal = percentComplete + '%';
    $bar.width(percentVal)
  },

  success: function(response) {
    // Response
  }
});

Espero que seja útil.

Pode usar

$(function() {
    $("#file_upload_1").uploadify({
        height        : 30,
        swf           : '/uploadify/uploadify.swf',
        uploader      : '/uploadify/uploadify.php',
        width         : 120
    });
});

Demonstração

Procure por lidar com o processo de envio de um ficheiro, assíncronamente aqui: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Amostra da ligação

<?php
if (isset($_FILES['myFile'])) {
    // Example:
    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
    exit;
}
?><!DOCTYPE html>
<html>
<head>
    <title>dnd binary upload</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function sendFile(file) {
            var uri = "/index.php";
            var xhr = new XMLHttpRequest();
            var fd = new FormData();

            xhr.open("POST", uri, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // Handle response.
                    alert(xhr.responseText); // handle response.
                }
            };
            fd.append('myFile', file);
            // Initiate a multipart/form-data upload
            xhr.send(fd);
        }

        window.onload = function() {
            var dropzone = document.getElementById("dropzone");
            dropzone.ondragover = dropzone.ondragenter = function(event) {
                event.stopPropagation();
                event.preventDefault();
            }

            dropzone.ondrop = function(event) {
                event.stopPropagation();
                event.preventDefault();

                var filesArray = event.dataTransfer.files;
                for (var i=0; i<filesArray.length; i++) {
                    sendFile(filesArray[i]);
                }
            }
        }
    </script>
</head>
<body>
    <div>
        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
    </div>
</body>
</html>

<form enctype="multipart/form-data">    

    <div class="form-group">
        <label class="control-label col-md-2" for="apta_Description">Description</label>
        <div class="col-md-10">
            <input class="form-control text-box single-line" id="apta_Description" name="apta_Description" type="text" value="">
        </div>
    </div>

    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>

E o js

<script>

    $(':button').click(function () {
        var formData = new FormData($('form')[0]);
        $.ajax({
            url: '@Url.Action("Save", "Home")',  
            type: 'POST',                
            success: completeHandler,
            data: formData,
            cache: false,
            contentType: false,
            processData: false
        });
    });    

    function completeHandler() {
        alert(":)");
    }    
</script>

Controlador

[HttpPost]
public ActionResult Save(string apta_Description, HttpPostedFileBase file)
{
    return Json(":)");
}

Com HTML5 e JavaScript, carregamento assíncrono é muito fácil, eu criar o upload de lógica, juntamente com o seu html, isso não é totalmente funciona como necessidades a api, mas demonstrar como funciona, se você tiver o endpoint chamado /upload (a partir da raiz do seu site, este código deve trabalhar para você:

const asyncFileUpload = () => {
  const fileInput = document.getElementById("file");
  const file = fileInput.files[0];
  const uri = "/upload";
  const xhr = new XMLHttpRequest();
  xhr.upload.onprogress = e => {
    const percentage = e.loaded / e.total;
    console.log(percentage);
  };
  xhr.onreadystatechange = e => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log("file uploaded");
    }
  };
  xhr.open("POST", uri, true);
  xhr.setRequestHeader("X-FileName", file.name);
  xhr.send(file);
}

<form>
  <span>File</span>
  <input type="file" id="file" name="file" size="10" />
  <input onclick="asyncFileUpload()" id="upload" type="button" value="Upload" />
</form>

Também mais algumas informações sobre as pinturas Xmlhtt:

O Objecto XMLHttpRequest

Todos os navegadores modernos suportam o objecto XMLHttpRequest. O objeto XMLHttpRequest pode ser usado para trocar dados com uma web servidor nos bastidores. Isto significa que é possível actualizar partes de uma página web, sem recarregar a página inteira.

Criar um objecto XMLHttpRequest

Todos os navegadores modernos (Chrome, Firefox) , IE7+, Edge, Safari, Opera) tem um objeto embutido no XMLHttpRequest.

Sintaxe para criar um objecto XMLHttpRequest:

Variável = novo XMLHttpRequest ();

Acesso Entre Domínios

Por razões de segurança, os navegadores modernos não permitir o acesso através de domínios.

Isto significa que tanto a página web como o ficheiro XML que tenta carregar, deve estar localizado no mesmo servidor.

Os exemplos em W3Schools todos os ficheiros XML abertos localizados nas W3Schools dominio.

Se quiseres use o exemplo acima em uma de suas próprias páginas web, o Os ficheiros XML que carrega devem estar localizados no seu próprio servidor.

Para mais detalhes, pode continuar a ler aqui...

Uma abordagem moderna sem o Jquery é usar o objecto FileList que obtém de volta de <input type="file"> quando o utilizador selecciona um(s) ficheiro (s) e depois usa Fetch para colocar a lista de Ficheiros enrolada em torno de um objecto FormData.

// The input DOM element
const inputElement = document.querySelector('input');

// Listen for a file submit from user
inputElement.addEventListener('change', () => {
    const data = new FormData()
    data.append('file', inputElement.files[0])
    data.append('imageName', 'flower')

    // Post to server
    fetch('/uploadImage', {
        method: 'POST',
        body: data
    })
});

Podes usar mais recente Obter a API por JavaScript. Assim:

function uploadButtonCLicked(){
    var input = document.querySelector('input[type="file"]')

    fetch('/url', {
      method: 'POST',
      body: input.files[0]
    }).then(res => res.json())   // you can do something with response
      .catch(error => console.error('Error:', error))
      .then(response => console.log('Success:', response));
}                               

Vantagem: a obtenção da API é suportada nativamente por todos os navegadores modernos, por isso não tem de importar nada. Além disso, lembre-se que fetch() devolve uma promessa que é então tratada usando.then(..code to handle response..) assíncronamente.

É uma pergunta antiga, mas ainda não tem resposta correcta, por isso:

Aqui está um exemplo do link acima -> 1 isso pode resolver o teu problema.

$('#fileupload').fileupload({
    add: function (e, data) {
        var that = this;
        $.getJSON('/example/url', function (result) {
            data.formData = result; // e.g. {id: 123}
            $.blueimp.fileupload.prototype
                .options.add.call(that, e, data);
        });
    } 
});

Pode fazer os uploads de vários ficheiros assíncronos usando JavaScript ou jQuery e isso sem usar nenhum 'plugin'. Você também pode mostrar o progresso em tempo real do upload de arquivos no controle de progresso. Encontrei dois bons links.

1. ASP.NET a funcionalidade de envio de Ficheiros Multitple baseada nos formulários Web com a barra de progresso
2. ASP.NET envio múltiplo de Ficheiros baseado no MVC feito no jQuery

A linguagem do lado do servidor é C# mas você pode fazer alguma modificação por fazê-lo funcionar com outra linguagem como PHP.

Ficheiro Enviar ASP.NET MVC principal:

Na janela Criar o controlo de envio de ficheiros em html:

<form method="post" asp-action="Add" enctype="multipart/form-data">
    <input type="file" multiple name="mediaUpload" />
    <button type="submit">Submit</button>
</form>

Agora crie o método de acção no seu controlador:

[HttpPost]
public async Task<IActionResult> Add(IFormFile[] mediaUpload)
{
    //looping through all the files
    foreach (IFormFile file in mediaUpload)
    {
        //saving the files
        string path = Path.Combine(hostingEnvironment.WebRootPath, "some-folder-path"); 
        using (var stream = new FileStream(path, FileMode.Create))
        {
            await file.CopyToAsync(stream);
        }
    }
}

A variável "hosting environment" é do tipo "Ihosting environment" que pode ser injectada no controlador através de uma injecção de dependência, como:

private IHostingEnvironment hostingEnvironment;
public MediaController(IHostingEnvironment environment)
{
    hostingEnvironment = environment;
}