Vraag Hoe kan ik asynchroon bestanden uploaden?


Ik wil een bestand asynchroon uploaden met jQuery. Dit is mijn HTML:

<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

En hier mijn Jquery code:

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

In plaats van dat het bestand wordt geüpload, krijg ik alleen de bestandsnaam. Wat kan ik doen om dit probleem op te lossen?

Huidige oplossing

Ik gebruik de jQuery Form Plugin om bestanden te uploaden.


2606
2017-10-03 10:22


oorsprong


antwoorden:


Met HTML5 je kunt bestandsuploads maken met Ajax en jQuery. Niet alleen dat, u kunt bestandsvalidaties (naam, grootte en MIME-type) uitvoeren of de voortgang van de voortgang afhandelen met de voortgangstag HTML5 (of een div). Onlangs moest ik een uploader voor bestanden maken, maar die wilde ik niet gebruiken Flash noch Iframes of plug-ins en na enig onderzoek kwam ik met de oplossing.

De HTML:

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

Ten eerste kun je wat validatie doen als je wilt. Bijvoorbeeld in de gebeurtenis onChange van het bestand:

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

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

Nu dient het Ajax-formulier in met de klik van de knop:

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

Zoals je ziet, wordt het uploaden van HTML5 (en sommige onderzoeken) niet alleen mogelijk, maar ook supereenvoudig. Probeer het maar eens Google Chrome omdat sommige HTML5-componenten van de voorbeelden niet in elke browser beschikbaar zijn.


2335
2018-01-06 13:34



Er zijn verschillende kant-en-klare plug-ins voor het uploaden van bestanden voor jQuery.

Dit soort uploadhacks doen is geen leuke ervaring, dus mensen vinden het leuk om kant-en-klare oplossingen te gebruiken.

Hier zijn een paar:

U kunt zoeken naar meer projecten op NPM (met "jQuery-plugin" als trefwoord) of op Github.


334
2017-10-15 10:35



Update 2017: het hangt nog steeds af van de browsers jouw demografisch gebruik.

Een belangrijk ding om te begrijpen met de "nieuwe" HTML5 file API is dat werd niet ondersteund tot IE 10. Als de specifieke markt waar u naar streeft een hogere dan gemiddelde bereidheid heeft ten opzichte van oudere versies van Windows, heeft u mogelijk geen toegang tot deze versies.

In 2017 is ongeveer 5% van de browsers een van IE 6, 7, 8 of 9. Als u een groot bedrijf bezoekt (dit is bijvoorbeeld een B2B-tool of iets dat u voor training levert), kan dat aantal razendsnel zijn. Nog maar een paar maanden geleden - in 2016 - behandelde ik een bedrijf dat IE8 gebruikt op meer dan 60% van hun machines.

Dus voordat je iets doet: controleer welke browser jouw gebruikers gebruiken. Als u dat niet doet, leert u een snelle en pijnlijke les waarom 'voor mij werkt' niet goed genoeg is in een leverantie aan een klant.

Mijn antwoord uit 2008 volgt.


Er zijn echter uitvoerbare niet-JS-methoden voor bestandsuploads. U kunt een iframe op de pagina maken (die u verbergt met CSS) en vervolgens uw formulier targeten om naar dat iframe te posten. De hoofdpagina hoeft niet te verplaatsen.

Het is een 'echte' post dus het is niet geheel interactief. Als u status nodig hebt, hebt u iets server-side nodig om dat te verwerken. Dit varieert enorm, afhankelijk van uw server. ASP.NET heeft mooiere mechanismen. PHP mislukt gewoon, maar je kunt gebruiken Perl of Apache-aanpassingen om er omheen te komen.

Als u meerdere bestandsuploads nodig heeft, kunt u het beste elk bestand een voor een doen (om maximale limieten voor het uploaden van bestanden te overschrijden). Plaats het eerste formulier in het iframe, volg de voortgang met behulp van het bovenstaande en wanneer dit is voltooid, plaatst u het tweede formulier in het iframe, enzovoort.

Of gebruik een Java / Flash-oplossing. Ze zijn veel flexibeler in wat ze kunnen doen met hun berichten ...


237
2017-10-03 10:41



Ik raad aan om de Fijne uploader plugin voor dit doel. Jouw JavaScript code zou zijn:

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

105
2017-11-21 16:38



Opmerking: dit antwoord is verouderd, het is nu mogelijk om bestanden te uploaden met XHR.


U kunt geen bestanden uploaden met XMLHttpRequest (Ajax). U kunt het effect simuleren met een iframe of Flash. Het uitstekende jQuery Form Plugin die je bestanden plaatst via een iframe om het effect te krijgen.


87
2017-10-03 10:36



Deze AJAX-bestand upload jQuery-plug-in uploadt het bestand wat, en passeert het antwoord op een terugroepactie, niets anders.

  • Het is niet afhankelijk van specifieke HTML, geef het gewoon een <input type="file">
  • Het vereist niet dat uw server op een bepaalde manier reageert
  • Het maakt niet uit hoeveel bestanden u gebruikt of waar ze zich op de pagina bevinden

- Gebruik zo weinig als -

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

- of zoveel als -

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

81
2017-07-29 00:34



Inpakken voor toekomstige lezers.

Asynchrone bestandsupload

Met HTML5

Je kunt bestanden uploaden met jQuery de ... gebruiken $.ajax() methode als FormData en de File API worden ondersteund (beide HTML5-functies).

U kunt ook bestanden verzenden zonder FormData maar in beide gevallen moet de File API aanwezig zijn om bestanden zo te verwerken dat ze kunnen worden verzonden 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!");
});

Voor een snel, puur JavaScript (geen jQuery) voorbeeld zie "Bestanden verzenden met behulp van een FormData-object".

Terugvallen

Wanneer HTML5 niet wordt ondersteund (nr File API) de enige andere pure JavaScript-oplossing (nr Flash of een andere browser plug-in) is de verborgen iframe techniek, waarmee een asynchroon verzoek kan worden geëmuleerd zonder de XMLHttpRequest voorwerp.

Het bestaat uit het instellen van een iframe als doel van het formulier met de bestandsingangen. Wanneer de gebruiker een aanvraag indient, worden de bestanden geüpload maar wordt het antwoord in het iframe weergegeven in plaats van de hoofdpagina opnieuw te renderen. Het verbergen van het iframe maakt het hele proces transparant voor de gebruiker en emuleert een asynchroon verzoek.

Als het goed wordt gedaan, zou het vrijwel in elke browser moeten werken, maar het heeft een aantal kanttekeningen bij het verkrijgen van de respons van het iframe.

In dit geval wilt u misschien een wrapper-plug-in gebruiken zoals Bifröst welke de iframe techniek maar biedt ook een jQuery Ajax-transport toestaan ​​om stuur bestanden met alleen de $.ajax() methode zoals deze:

$.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 is slechts een klein omhulsel dat fallback-ondersteuning toevoegt aan de ajax-methode van jQuery, maar veel van de eerder genoemde plug-ins zoals jQuery Form Pluginof jQuery-bestand uploaden omvat de volledige stapel van HTML5 tot verschillende fallbacks en enkele handige functies om het proces te vergemakkelijken. Afhankelijk van uw behoeften en vereisten, kunt u een lege implementatie of een van deze plug-ins overwegen.


75
2017-08-25 14:17