Upload de fichier avec l'AJAX de jQuery et de Gestionnaire (ashx) ne fonctionne pas

Je suis en train de télécharger un fichier d'image avec jQuery AJAX et un générique de gestionnaire. Mais il semble que le fichier n'est pas passé à la gestionnaire.
Après la soumission, context.Request.Files[0]; est toujours nulle :-/

Ce que je fais mal?

HTML:

<form id="form1" runat="server" method="post" enctype="multipart/form-data">

    <input name="file" id="file" type="file" />
    <input id="save" name="submit" value="Submit" type="submit" />

</form>

JS:

$().ready(function ()
{
    $('#file').change(function () 
    {
        sendFile(this.files[0]);
    });
});

function sendFile(file) 
{
    $.ajax({
        type: 'post',
        url: 'FileUpload.ashx',
        data: file,
        success: function () {
            //do something
        },
        xhrFields:
        {
            onprogress: function (progress) 
            {
                //calculate upload progress
                var percentage = Math.floor((progress.total / progress.totalSize) * 100);

                //log upload progress to console
                console.log('progress', percentage);

                if (percentage === 100) {
                    console.log('DONE!');
                }
            }
        },
        processData: false,
        contentType: 'multipart/form-data'
    });
}

ASHX:

public void ProcessRequest (HttpContext context) 
{
    HttpPostedFile file = context.Request.Files[0];

    if (file.ContentLength > 0)
    {
        //do something
    }
}
Vous avez un jquery référence quelque part dans votre code de droit?
oui, je l'ai. le gestionnaire est appelé, mais aucun fichier n'est chargé :-/

OriginalL'auteur Ricky | 2013-06-06

  1. 7

    Réussi à le faire fonctionner 🙂

    Voici mon code...

    ///create a new FormData object
var formData = new FormData(); //var formData = new FormData($('form')[0]);

///get the file and append it to the FormData object
formData.append('file', $('#file')[0].files[0]);

///AJAX request
$.ajax(
{
    ///server script to process data
    url: "fileupload.ashx", //web service
    type: 'POST',
    complete: function ()
    {
        //on complete event     
    },
    progress: function (evt)
    {
        //progress event    
    },
    ///Ajax events
    beforeSend: function (e) {
        //before event  
    },
    success: function (e) {
        //success event
    },
    error: function (e) {
        //errorHandler
    },
    ///Form data
    data: formData,
    ///Options to tell JQuery not to process data or worry about content-type
    cache: false,
    contentType: false,
    processData: false
});
///end AJAX request
    Merci de poster ce ... il a travaillé génial pour moi
    vous êtes les bienvenus @urbanlemur 🙂
    Parfait, d'autres "solutions" que j'ai trouvé en ligne n'ont pas semblé fonctionner pour moi, mais ce n'.

    OriginalL'auteur Ricky

  2. 1

    Quand j'mettre en œuvre une telle chose, je utiliser 

    var fd = new FormData();
fd.append(file.name,file);

    Et dans l'appel ajax, envoyer le fd.

    après avoir fait ce changement, le gestionnaire n'a pas appelé, ce qui pourrait être le problème?
    éventuellement, d'un côté client en erreur. Si vous avez un exemple vivant, ce serait génial. Si non, et que vous utilisez google chrome/firefox, consultez le débogueur console et laissez-moi savoir ce que vous y voyez.
    dans la console, j'obtiens l'erreur suivante: Uncaught SyntaxError: Not enough arguments j'ai téléchargé la démo, donc vous pouvez essayer: démo en ligne
    J'ai corrigé ma réponse - je omis par inadvertance le premier argument, le nom de fichier.
    maintenant j'ai cette erreur:POST http://localhost:10081/FileUpload.ashx 500 (Internal Server Error) x.support.cors.e.crossDomain.send x.extend.ajax sendFile (anonymous function) x.event.dispatch y.handle

    OriginalL'auteur kobigurk