jQuery ajax télécharger le fichier dans asp.net mvc

Question

jQuery ajax télécharger le fichier dans asp.net mvc

J'ai un fichier à mon avis

<form id="upload" enctype="multipart/form-data">
   <input type="file" name="fileUpload" id="fileUpload" size="23" />
</form>

Et une requête ajax

$.ajax({
    url: '<%=Url.Action("JsonSave","Survey")  %>',
    dataType: 'json',
    processData: false,
    contentType: "multipart/mixed",
    data: {
        Id: selectedRow.Id,
        Value: 'some date was added by the user here :))'
    },
    cache: false,
    success: function (data) {}
});

Mais il n'y a pas de fichier dans la requête .Fichiers . Quel est le problème avec la demande ajax?

52

ajax asp.net-mvc jquery

demandé sur Hakam Fostok 2010-03-11 23:11:07

5 réponses

score 102 · Answer 1

Télécharger des fichiers en utilisant AJAX dans ASP.Net MVC

Les choses ont changé depuis HTML5

JavaScript

document.getElementById('uploader').onsubmit = function () {
    var formdata = new FormData(); //FormData object
    var fileInput = document.getElementById('fileInput');
    //Iterating through each files selected in fileInput
    for (i = 0; i < fileInput.files.length; i++) {
        //Appending each file to FormData object
        formdata.append(fileInput.files[i].name, fileInput.files[i]);
    }
    //Creating an XMLHttpRequest and sending
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/Home/Upload');
    xhr.send(formdata);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    }
    return false;
}

Contrôleur de

public JsonResult Upload()
{
    for (int i = 0; i < Request.Files.Count; i++)
    {
        HttpPostedFileBase file = Request.Files[i]; //Uploaded file
        //Use the following properties to get file's name, size and MIMEType
        int fileSize = file.ContentLength;
        string fileName = file.FileName;
        string mimeType = file.ContentType;
        System.IO.Stream fileContent = file.InputStream;
        //To save file, use SaveAs method
        file.SaveAs(Server.MapPath("~/")+ fileName ); //File will be saved in application root
    }
    return Json("Uploaded " + Request.Files.Count + " files");
}

modifier : le code HTML

<form id="uploader">
    <input id="fileInput" type="file" multiple>
    <input type="submit" value="Upload file" />
</form>

score 15 · Answer 2

Les téléchargements de fichiers AJAX sont maintenant possibles en passant un objet FormData à la propriété data de la requête $.ajax.

Comme L'OP a spécifiquement demandé une implémentation jQuery, voici:

<form id="upload" enctype="multipart/form-data" action="@Url.Action("JsonSave", "Survey")" method="POST">
    <input type="file" name="fileUpload" id="fileUpload" size="23" /><br />
    <button>Upload!</button>
</form>

$('#upload').submit(function(e) {
    e.preventDefault(); // stop the standard form submission

    $.ajax({
        url: this.action,
        type: this.method,
        data: new FormData(this),
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
            console.log(data.UploadedFileCount + ' file(s) uploaded successfully');
        },
        error: function(xhr, error, status) {
            console.log(error, status);
        }
    });
});

public JsonResult Survey()
{
    for (int i = 0; i < Request.Files.Count; i++)
    {
        var file = Request.Files[i];
        // save file as required here...
    }
    return Json(new { UploadedFileCount = Request.Files.Count });
}

Plus d'informations sur FormData chez MDN

score 5 · Answer 3

Vous ne pouvez pas télécharger de fichiers via ajax, vous devez utiliser un iFrame ou une autre supercherie pour faire une publication complète. Cela est principalement dû à des problèmes de sécurité.

Voici une écriture décente comprenant un exemple de projet utilisant SWFUpload et ASP.Net MVC par Steve Sanderson. C'est la première chose que j'ai lu pour que cela fonctionne correctement Asp.Net MVC (j'étais nouveau à MVC à l'époque aussi), j'espère que c'est aussi utile pour vous.

score 0 · Answer 4

Si vous publiez un formulaire en utilisant ajax, vous ne pouvez pas envoyer l'image en utilisant $.ajax méthode, vous devez utiliser la méthode classique xmlHttpobject pour enregistrer l'image, autre alternative de celui-ci utiliser le type de soumission au lieu de button

score 0 · Answer 5

J'ai un échantillon comme celui-ci sur la version vuejs: v2.5.2

<form action="url" method="post" enctype="multipart/form-data">
    <div class="col-md-6">
        <input type="file" class="image_0" name="FilesFront" ref="FilesFront" />
    </div>
    <div class="col-md-6">
        <input type="file" class="image_1" name="FilesBack" ref="FilesBack" />
    </div>
</form>
<script>
Vue.component('v-bl-document', {
    template: '#document-item-template',
    props: ['doc'],
    data: function () {
        return {
            document: this.doc
        };
    },
    methods: {
        submit: function () {
            event.preventDefault();

            var data = new FormData();
            var _doc = this.document;
            Object.keys(_doc).forEach(function (key) {
                data.append(key, _doc[key]);
            });
            var _refs = this.$refs;
            Object.keys(_refs).forEach(function (key) {
                data.append(key, _refs[key].files[0]);
            });

            debugger;
            $.ajax({
                type: "POST",
                data: data,
                url: url,
                cache: false,
                contentType: false,
                processData: false,
                success: function (result) {
                    //do something
                },

            });
        }
    }
});
</script>

Las etiquetas más populares

jQuery ajax télécharger le fichier dans asp.net mvc

5 réponses