Come posso caricare i file in modo asincrono?

Vorrei caricare un file in modo asincrono con jQuery. Questo è il mio HTML:

File   

E qui il mio codice Jquery :

 $(document).ready(function () { $("#uploadbutton").click(function () { var filename = $("#file").val(); $.ajax({ type: "POST", url: "addFile.do", enctype: 'multipart/form-data', data: { file: filename }, success: function () { alert("Data Uploaded: "); } }); }); }); 

Invece del file che viene caricato, ricevo solo il nome file. Cosa posso fare per risolvere questo problema?

Soluzione corrente

Sto usando il plug- in jQuery per caricare file.

Con HTML5 puoi caricare file con Ajax e jQuery. Non solo, puoi fare convalide di file (nome, dimensione e tipo MIME) o gestire l’evento progress con il tag di progresso HTML5 (o un div). Recentemente ho dovuto creare un uploader di file, ma non volevo usare Flash o Iframes o plugin e dopo alcune ricerche ho trovato la soluzione.

L’HTML:

 

Per prima cosa, puoi fare un po ‘di validazione se vuoi. Ad esempio, nell’evento onChange del file:

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

Ora l’Ajax invia con il clic del pulsante:

 $(':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; } }); }); 

Come puoi vedere, con HTML5 (e alcune ricerche) il caricamento di file non solo diventa ansible ma anche molto facile. Provalo con Google Chrome in quanto alcuni dei componenti HTML5 degli esempi non sono disponibili in tutti i browser.

Ci sono vari plugin pronti all’uso per caricare file per jQuery.

Fare questo tipo di caricamento degli hack non è un’esperienza piacevole, quindi alle persone piace usare soluzioni già pronte.

Ecco alcuni:

  • JQuery File Uploader
  • Plug-in di caricamento di file multipli
  • Mini caricamento di file multipli
  • caricamento file jQuery

Puoi cercare altri progetti su NPM (usando “jquery-plugin” come parola chiave) o su Github.

Aggiornamento 2017: Dipende ancora dai browser utilizzati dai tuoi dati demografici.

Una cosa importante da capire con la “nuova” API del file HTML5 è che non è stata supportata fino a IE 10 . Se il mercato specifico a cui miri ha una preponderità superiore alla media verso versioni precedenti di Windows, potresti non accedervi.

Verso il 2017, circa il 5% dei browser è uno di IE 6, 7, 8 o 9. Se ti rechi in una grande azienda (ad es. Questo è uno strumento B2B o qualcosa che stai offrendo per la formazione) quel numero può esplodere. Solo pochi mesi fa, nel 2016, mi sono occupato di un’azienda che utilizzava IE8 su oltre il 60% delle loro macchine.

Quindi, prima di fare qualsiasi cosa: controlla il browser utilizzato dagli utenti . Se non lo fai, imparerai una lezione rapida e dolorosa sul perché “lavora per me” non è abbastanza buono in un deliverable per un cliente.

La mia risposta dal 2008 segue.


Tuttavia, esistono metodi non JS validi per il caricamento di file. Puoi creare un iframe sulla pagina (che nascondi con i CSS) e quindi indirizzare il tuo modulo per postare su quell’iframe. La pagina principale non ha bisogno di spostarsi.

È un post “reale” quindi non è completamente interattivo. Se hai bisogno di uno stato hai bisogno di qualcosa sul lato server per elaborarlo. Questo varia in modo massiccio a seconda del tuo server. ASP.NET ha meccanismi più belli. PHP plain fallisce, ma puoi usare le modifiche di Perl o Apache per aggirarlo.

Se hai bisogno di più caricamenti di file, è meglio fare ogni file uno alla volta (per superare i limiti massimi di caricamento del file). Pubblica il primo modulo sull’iframe, monitora i suoi progressi usando quanto sopra e quando ha finito, pubblica il secondo modulo sull’iframe e così via.

O utilizzare una soluzione Java / Flash. Sono molto più flessibili in quello che possono fare con i loro post …

Raccomando di usare il plugin Fine Uploader per questo scopo. Il tuo codice JavaScript sarebbe:

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

Nota: questa risposta è obsoleta, ora è ansible caricare file usando XHR.


Non puoi caricare file usando XMLHttpRequest (Ajax). Puoi simulare l’effetto usando un iframe o Flash. L’eccellente jQuery Form Plugin che invia i tuoi file attraverso un iframe per ottenere l’effetto.

Questo file upload AJAX plugin jQuery carica il file somehwere e passa la risposta a un callback, nient’altro.

  • Non dipende da HTML specifico, basta dargli un
  • Non richiede che il tuo server risponda in un modo particolare
  • Non importa quanti file usi o dove si trovano sulla pagina

– Usa meno di –

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

– o 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'); } }); 

Conclusione per i futuri lettori.

Caricamento file asincrono

Con HTML5

Puoi caricare file con jQuery usando il metodo $.ajax() se sono supportati FormData e l’ API File (entrambe le funzionalità HTML5).

È inoltre ansible inviare file senza FormData, ma in entrambi i casi l’API File deve essere presente per elaborare i file in modo che possano essere inviati con 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!"); }); 

Per un esempio di JavaScript veloce, puro ( senza jQuery ), vedere ” Invio di file utilizzando un object FormData “.

Ricaderci

Quando HTML5 non è supportato (senza File API ), l’unica altra soluzione JavaScript pura (senza Flash o nessun altro plug-in del browser) è la tecnica iframe nascosta , che consente di emulare una richiesta asincrona senza utilizzare l’object XMLHttpRequest .

Consiste nell’impostare un iframe come destinazione del modulo con gli input del file. Quando l’utente invia una richiesta viene effettuata e i file vengono caricati ma la risposta viene visualizzata all’interno dell’iframe invece di ripetere il rendering della pagina principale. Nascondere l’iframe rende l’intero processo trasparente per l’utente ed emula una richiesta asincrona.

Se fatto correttamente dovrebbe funzionare virtualmente su qualsiasi browser, ma ha alcuni avvertimenti su come ottenere la risposta dall’iframe.

In questo caso potresti preferire usare un plugin di wrapper come Bifröst che usa la tecnica iframe ma fornisce anche un trasporto jQuery Ajax che consente di inviare file con il solo metodo $.ajax() questo modo:

 $.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!"); }); 

plugin

Bifröst è solo un piccolo wrapper che aggiunge il supporto di fallback al metodo ajax di jQuery, ma molti dei plugin sopra menzionati come jQuery Form Plugin o jQuery File Upload includono l’intero stack da HTML5 a diversi fallback e alcune utili funzionalità per facilitare il processo. A seconda delle esigenze e dei requisiti, potresti prendere in considerazione un’implementazione nuda o uno di questi plugin.

Ho usato lo script qui sotto per caricare le immagini che funzionano bene.

HTML

  

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('
'); 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); });

Spiegazione

Uso il div risposta per mostrare l’animazione di caricamento e la risposta dopo il caricamento.

La parte migliore è che puoi inviare dati extra come ID e così via con il file quando usi questo script. Ho menzionato extra-data come nella sceneggiatura.

A livello di PHP funzionerà come un normale caricamento di file. i dati supplementari possono essere recuperati come dati $_POST .

Qui non stai usando un plugin e roba del genere. Puoi cambiare il codice come preferisci. Non stai codificando ciecamente qui. Questa è la funzionalità principale di qualsiasi caricamento di file jQuery. In realtà Javascript.

Ho trovato alcune librerie di caricamento file basate su jQuery davvero potenti. Controlla questi:

  1. Plupload
  2. caricamento file jQuery
  3. FineUploader

Puoi caricare semplicemente con jQuery .ajax() .

HTML:

 

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) { // ... } }); })); }); 

Puoi farlo in vaniglia JavaScript abbastanza facilmente. Ecco uno snippet del mio attuale progetto:

 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); 

Il modo più semplice e più efficace che ho fatto in passato è semplicemente quello di indirizzare un tag iFrame nascosto con il tuo modulo, quindi verrà inviato all’interno dell’iframe senza ricaricare la pagina.

Cioè se non vuoi usare un plugin, JavaScript o qualsiasi altra forma di “magia” diversa dall’HTML. Ovviamente puoi combinarlo con JavaScript o cosa hai …

 

È anche ansible leggere il contenuto dell’iframe su onLoad per errori del server o risposte positive e quindi inviarlo all’utente.

Chrome, iFrame e onLoad

-note- è necessario continuare a leggere se si è interessati a come impostare un blocco UI durante il caricamento / download

Al momento Chrome non triggers l’evento onLoad per l’iframe quando viene utilizzato per trasferire file. Firefox, IE e Edge triggersno l’evento onload per i trasferimenti di file.

L’unica soluzione che ho trovato funziona per Chrome era usare un cookie.

Per farlo sostanzialmente quando viene avviato il caricamento / download:

  • [Lato client] Avvia un intervallo per cercare l’esistenza di un cookie
  • [Lato server] Fai tutto il necessario con i dati del file
  • [Lato server] Imposta cookie per intervallo lato client
  • [Lato client] Intervallo vede il cookie e lo utilizza come l’evento onLoad. Ad esempio, è ansible avviare un blocco dell’interfaccia utente e quindi onLoad (o quando viene creato un cookie) rimuovere il blocco dell’interfaccia utente.

Usare un cookie per questo è brutto ma funziona.

Ho creato un plugin jQuery per gestire questo problema per Chrome durante il download, puoi trovarlo qui

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

Lo stesso principio di base si applica anche al caricamento.

Per utilizzare il downloader (includere il JS, ovviamente)

  $('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'); }); 

E sul lato server, appena prima di trasferire i dati del file, crea il cookie

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

Il plug-in vedrà il cookie, quindi triggers il callback onComplete .

Una soluzione che ho trovato era di avere il

target a un iFrame nascosto. L’iFrame può quindi eseguire JS per mostrare all’utente che è completo (al caricamento della pagina).

Ho scritto questo in un ambiente Rails . Sono solo circa cinque righe di JavaScript, se usi il leggero plugin jQuery-form.

La sfida consiste nel far funzionare il caricamento AJAX mentre il remote_form_for standard non comprende l’invio di moduli in più parti. Non invierà i dati del file che Rails cerca con la richiesta AJAX.

È qui che entra in gioco il plugin in forma jQuery.

Ecco il codice Rails per questo:

 <% 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 %> 

Ecco il codice JavaScript associato:

 $('#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. }, }); }); 

Ed ecco l’azione del controller Rails, piuttosto vanilla:

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

Ho usato questo per le ultime settimane con Bloggity, e ha funzionato come un campione.

Semplice Ajax Uploader è un’altra opzione:

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

  • Cross-browser – funziona in IE7 +, Firefox, Chrome, Safari, Opera
  • Supporta caricamenti multipli e simultanei, anche in browser non HTML5
  • Nessun flash o CSS esterno: solo un file Javascript da 5Kb
  • Supporto integrato opzionale per barre di avanzamento cross-browser (utilizzando l’estensione APC di PHP)
  • Flessibile e altamente personalizzabile: usa qualsiasi elemento come pulsante di caricamento, adatta i tuoi indicatori di progresso
  • Nessun modulo richiesto, è sufficiente fornire un elemento che fungerà da pulsante di caricamento
  • Licenza MIT – liberamente utilizzabile in un progetto commerciale

Esempio di utilizzo:

 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 } }); 

jQuery Uploadify è un altro buon plugin che ho usato prima per caricare i file. Il codice JavaScript è semplice come il seguente: codice. Tuttavia, la nuova versione non funziona in 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) { // ... } }); 

Ho fatto molte ricerche e ho trovato un’altra soluzione per caricare file senza plugin e solo con ajax. La soluzione è la seguente:

 $(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); } 

Ecco solo un’altra soluzione su come caricare il file ( senza alcun plugin )

Utilizzando semplici Javascripts e AJAX (con barra di avanzamento)

Parte HTML

 

JS parte

 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"; } 

Parte PHP

  

Ecco l’applicazione EXAMPLE

 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){ } }); 

Puoi utilizzare i dati del modulo per pubblicare tutti i tuoi valori, comprese le immagini.

To upload file asynchronously with Jquery use below steps:

step 1 In your project open Nuget manager and add package (jquery fileupload(only you need to write it in search box it will come up and install it.)) URL: https://github.com/blueimp/jQuery-File-Upload

step 2 Add below scripts in the HTML files, which are already added to the project by running above package:

jquery.ui.widget.js

jquery.iframe-transport.js

jquery.fileupload.js

step 3 Write file upload control as per below code:

  

step 4 write a js method as uploadFile as below:

  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 } }); }; 

step 5 In ready function call element file upload to initiate the process as per below:

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

step 6 Write MVC controller and Action as per below:

 public class DocumentUploadController : Controller { [System.Web.Mvc.HttpPost] public JsonResult upload(ICollection 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 }; } } 

Convert file to base64 using |HTML5’s readAsDataURL() or some base64 encoder . Fiddle here

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

Then to retrieve:

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

You can see a solved solution with a working demo here that allows you to preview and submit form files to the server. For your case, you need to use Ajax to facilitate the file upload to the server:

  File    

The data being submitted is a formdata. On your jQuery, use a form submit function instead of a button click to submit the form file as shown below.

 $(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"); }); }); }); 

View more details

Sample: If you use jQuery, you can do easy to an upload file. This is a small and strong jQuery plugin, http://jquery.malsup.com/form/ .

Esempio

 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 } }); 

I hope it would be helpful

Puoi usare

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

dimostrazione

Look for Handling the upload process for a file, asynchronously in here: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Sample from the link

    dnd binary upload     
Drag & drop your file here...

This is my solution.

 

and the js

  

Controller

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

Using HTML5 and JavaScript , uploading async is quite easy, I create the uploading logic along with your html, this is not fully working as it needs the api, but demonstrate how it works, if you have the endpoint called /upload from root of your website, this code should work for you:

 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); } 
 
File

You can use newer Fetch API by JavaScript. Come questo:

 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)); } 

Advantage: Fetch API is natively supported by all modern browsers, so you don’t have to import anything. Also, note that fetch() returns a Promise which is then handled by using .then(..code to handle response..) asynchronously.

It is an old question, but still has no answer correct answer, so:

Have you tried jQuery-File-Upload ?

Here is an example from the link above -> 1 that might solve your problem:

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

A modern approach without Jquery is to use the FileList object you get back from when user selects a file(s) and then use Fetch to post the FileList wrapped around a FormData object.

 // 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 }) }); 

You can do the Asynchronous Multiple File uploads using JavaScript or jQuery and that to without using any plugin. You can also show the real time progress of file upload in the progress control. I have come across 2 nice links –

  1. ASP.NET Web Forms based Mulitple File Upload Feature with Progress Bar
  2. ASP.NET MVC based Multiple File Upload made in jQuery

The server side language is C# but you can do some modification for making it work with other language like PHP.