Come faccio a importare / caricare file con jQuery AJAX?

Question

Come faccio a importare / caricare file con jQuery AJAX?

0

61310 2012-11-01

Continuo a riscontrare unproblema duranteil recupero deifile aggiuntiin AJAXin modo che lafunzione ajax del serverpossaelaborarei dati. Comepossofarein modo che $ _FILES vengapassato allo stessomodo dell'azionepredefinita (incorporataneglielementi delmodulo)?

Modulo HTML

 <form id="frmImport" name="frmImport" method="post" enctype="multipart/form-data" >
    <input id="file_import" name="importData" type="file" />
    <br/>
    <button id="btn_import" type="submit" >Import</button>
</form>

<"JavaScript

     jQuery(document).ready(function($) {
    //This is already setup and sent from the server side, and is
    // is used to prevent unauthorized users from uploading data.
    var importnonce = "3x4mpl3f4k3n0nc3"; 

    $('#frmImport').submit(function(e) {
        e.preventDefault();

        // CHECK FOR ANY ERRORS HERE.
        // IF ERRORS EXIST, RETURN FALSE TO END OPERATIONS.

        var formData = new FormData();
        formData.append('action', 'ajax_handler_import');
        formData.append('_ajax_nonce', importNonce);

        // Issue occures here. PHP gets a string '[object FormData]'.
        var importFiles = $('#file_import')[0].files;
        formData.append('uploadFiles', importFiles);

        jQuery.ajax({
            url: ajaxurl,
            type: 'POST',
            cache: false,
            contentType: false,
            processData: false,

            data: formData,

            beforeSend: function(jqXHR, settings) {
                console.log("Haven't entered server side yet.");
            },
            dataFilter: function(data, type) {
                // Used to parse data, and possibly check for errors.
                console.log("JSON string echoed back from server side.");
            },
            success: function(data, textStatus, jqXHR) {
                console.log("Back from server-side!");
                // Checking errors that may have been caught on the server side that
                // normally wouldn't display in the error Ajax function.
                if (data.msg != 'success') {
                    alert(data.error);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log("A JS error has occurred.");
            },
            complete: function(jqXHR, textStatus) {
                console.log("Ajax is finished.");
            }
        });

        return false;
    });
});

Server/gestore PHP

 <?php
class server {
    function ajax_import_handler() {
        check_ajax_referer("ajax_handler_import");

        $rtnData = new stdClass();
        $rtnData->msg = 'success'; //For signifying Server errors
        $rtnData->error = ''; //For displaying custom error messages or using the try/catch method

        //Do Stuff
        foreach ($_FILES as $key => $value) {
            //GET FILE CONTENT
            $file_array[$key] = json_decode(file_get_contents($value['tmp_name']));
        }

        // Do more stuff with file(s).

        // Add stuff to $rtnData.

        echo json_encode($rtnData);
    }
}
?>

I keep running into an issue getting the file(s) added in AJAX so that the server ajax function can process the data. How can I get the $_FILES to be passed the same as with the default action (built into form elements)?

HTML Form

<form id="frmImport" name="frmImport" method="post" enctype="multipart/form-data" >
    <input id="file_import" name="importData" type="file" />
    <br/>
    <button id="btn_import" type="submit" >Import</button>
</form>

JavaScript

    jQuery(document).ready(function($) {
    //This is already setup and sent from the server side, and is
    // is used to prevent unauthorized users from uploading data.
    var importnonce = "3x4mpl3f4k3n0nc3"; 

    $('#frmImport').submit(function(e) {
        e.preventDefault();

        // CHECK FOR ANY ERRORS HERE.
        // IF ERRORS EXIST, RETURN FALSE TO END OPERATIONS.

        var formData = new FormData();
        formData.append('action', 'ajax_handler_import');
        formData.append('_ajax_nonce', importNonce);

        // Issue occures here. PHP gets a string '[object FormData]'.
        var importFiles = $('#file_import')[0].files;
        formData.append('uploadFiles', importFiles);

        jQuery.ajax({
            url: ajaxurl,
            type: 'POST',
            cache: false,
            contentType: false,
            processData: false,

            data: formData,

            beforeSend: function(jqXHR, settings) {
                console.log("Haven't entered server side yet.");
            },
            dataFilter: function(data, type) {
                // Used to parse data, and possibly check for errors.
                console.log("JSON string echoed back from server side.");
            },
            success: function(data, textStatus, jqXHR) {
                console.log("Back from server-side!");
                // Checking errors that may have been caught on the server side that
                // normally wouldn't display in the error Ajax function.
                if (data.msg != 'success') {
                    alert(data.error);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log("A JS error has occurred.");
            },
            complete: function(jqXHR, textStatus) {
                console.log("Ajax is finished.");
            }
        });

        return false;
    });
});

PHP Server/Handler

<?php
class server {
    function ajax_import_handler() {
        check_ajax_referer("ajax_handler_import");

        $rtnData = new stdClass();
        $rtnData->msg = 'success'; //For signifying Server errors
        $rtnData->error = ''; //For displaying custom error messages or using the try/catch method

        //Do Stuff
        foreach ($_FILES as $key => $value) {
            //GET FILE CONTENT
            $file_array[$key] = json_decode(file_get_contents($value['tmp_name']));
        }

        // Do more stuff with file(s).

        // Add stuff to $rtnData.

        echo json_encode($rtnData);
    }
}
?>

fonte
EkoJR

2 risposta

voti

Mridul Aggarwal · Answer 1 · 2012-11-01

3

2012-11-01

Non hoprovatomapenso che sianecessario aggiungere l'oggetto FormData direttamente comeparametro data.Qualcosa di simile

     var ajaxData = new FormData();

    ajaxData.append( 'action', 'ajax_handler_import' );
    ajaxData.append( '_ajax_nonce', importNonce );
    // or maybe skip the nonce for now

    jQuery.each($('#fileImportData')[0].files, function(i, file) {
        ajaxData.append('file-'+i, file);
    });

Il resto del codice va così com'è

I haven't tried but i think you need to add FormData object directly as data parameter. Something like this

    var ajaxData = new FormData();

    ajaxData.append( 'action', 'ajax_handler_import' );
    ajaxData.append( '_ajax_nonce', importNonce );
    // or maybe skip the nonce for now

    jQuery.each($('#fileImportData')[0].files, function(i, file) {
        ajaxData.append('file-'+i, file);
    });

The rest of your code goes as it is

Scusa senon ho rispostoprima ... stavo cercando difinire unprogettoe hopensato che sareitornato quando avròpiù conoscenza sull'argomento.Grazieper averfornito la soluzione,non sapevo che l'aggiunta dell'oggetto FormData a un oggetto lo avrebbe rovinatoe stavoesaurendo leidee.Figure sarebbe un sempliceproblema xP.La lezione appresa qui: stare lontano da oggettimisti.

Sorry I haven't replied sooner...I was trying to finish out a project, and figured I'd come back when I have more knowledge on the subject. Thanks for providing the solution, I didn't know adding the FormData object to an object would mess it up, and I was running out of ideas. Figures it would be a simple problem xP. The lesson learned here: stay away from mixed objects.
- 0
- 2012-12-01
- EkoJR
Pernonparlare di questononfunzionerà su IE9e versioniprecedenti di IE.

Not to mention this won't work on IE9 and below IE versions.
- 0
- 2015-11-03
- Arda

Bainternet · Answer 2 · 2012-11-01

1

2012-11-01

Ajaxin sensotradizionale è XMLHttpRequest,chenon consente di codificaree inviarefile locali a un server.

Ilmodopiù comunepereseguireil caricamentotramitemezzi "ajax" consistenell'usare unfile swf Flashpergestireil caricamento sulla stessapagina o utilizzare unmodulo che abbia come destinazione uniframe 1x1invisibile.

Ecco una domandamolto simile con una buona risposta per vedere comepuoifarlo

Sì,hopassato quella sessione di domande/risposte di recente.Sfortunatamente,non hofamiliarità con Flashe ho cercato dievitare di aggiungereplug-in,sepossibile.Hoprovatoprincipalmente a seguireilmetodo Ajax di WordPress,ma da quello che hotrovato,il solopassaggio ad ajax è limitato/limitato daibrowser.Il riferimentoprincipale a questo [Q/A] (http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery)mi haportato a [FormData Objects] (https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects) che dice che èpossibile seilbrowser utilizzato lo ha.

Yea, I was going through that Q/A recently. Unfortunately, I'm not familiar with flash, and I've been trying to avoid adding plugins if at all possible. I've mainly been trying to follow WordPress Ajax method, but by what I've found, just passing it to ajax is restricted/limited by the browsers. Mainly refering to this [Q/A](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery) led me to [FormData Objects](https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects) which says is possible if the browser used has it.
- 0
- 2012-11-02
- EkoJR
Risulta chepuoi usarei tuoimetodiperpassarei dati delfile a unafunzione AJAXinvece difare affidamento su unplugin JS.Per lamaggiorparte,FormData Objects (comemenzionato sopra),gestisce questo con le operazioni XMLHttpRequest Livello 2 (come lointendo attualmente)ed è supportato datuttii principalibrowser ora.Hopensato che sarebbe stata una questione ditempo dopo l'uscita di HTML5.Tuttavia,l'utilizzo diplUpload è unapossibile raccomandazioneperi dati difile digrandi dimensioni.

It turns out that you can use your own methods for passing file data over to an AJAX function instead of relying on a JS plugin. For the most part, FormData Objects (as mentioned above), handles this with XMLHttpRequest Level 2 operations (as I currently understand it), and is supported by all major browsers now. I figured it would be a matter of time after HTML5 came out. However, using plUpload is a possible recommendation for large file data.
- 0
- 2012-12-01
- EkoJR