web-dev-qa-db-fra.com

Téléchargement de fichiers à l'aide de MVC 4 avec Ajax

Je développe une application web en utilisant MVC 4 + VS 2012 + Framework 4.5.

J'ai trois vues partielles, qui s'affichent dynamiquement, sur ma page d'index en fonction de l'action de l'utilisateur.

Sur trois vues partielles, une vue partielle a Upload File fonctionnalité avec certains champs de saisie comme les zones de texte.

Problème:

Lorsque l'utilisateur clique sur le bouton Enregistrer (qui est présent sur la vue partielle elle-même). Je souhaite enregistrer le champ de saisie dans ma base de données et le fichier téléchargé stocké dans le dossier partagé.

Je veux implémenter cela en utilisant Ajax (après avoir téléchargé le fichier et enregistré les données, l'utilisateur devrait être sur la même vue).

Comment puis-je implémenter la même chose? La solution JQuery serait bien.

J'ai essayé avec @Ajax.BeginForm mais après le téléchargement du fichier, le post complet revient.

jqueryajaxasp.net-mvcasp.net-mvc-4
18
sanjay jadam

Voici mon petit échantillon de travail, qui télécharge plusieurs fichiers et télécharge dans un dossier appelé "indésirable"

Côté client ....

    <html>
    <head>
    <title>Upload Example</title>
    <script src="~/Scripts/jquery-2.1.0.intellisense.js"></script>
    <script src="~/Scripts/jquery-2.1.0.js"></script>
    <script src="~/Scripts/jquery-2.1.0.min.js"></script>
    <script>
    $(document).ready(function () {
        $("#Upload").click(function () {
            var formData = new FormData();
            var totalFiles = document.getElementById("FileUpload").files.length;
            for (var i = 0; i < totalFiles; i++)
            {
                var file = document.getElementById("FileUpload").files[i];

                formData.append("FileUpload", file);
            }
            $.ajax({
                type: "POST",
                url: '/Home/Upload',
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function (response) {
                    alert('succes!!');
                },
                error: function (error) {
                    alert("errror");
                }
            });
        });
    });

</script>
</head>
<body>
    <input type="file" id="FileUpload" multiple />
    <input type="button" id="Upload" value="Upload" />
</body>
</html>

Côté serveur ....

public class HomeController : Controller
{
    [HttpPost]
    public void Upload( )
    {
        for( int i = 0 ; i < Request.Files.Count ; i++ )
        {
            var file = Request.Files[i];

            var fileName = Path.GetFileName( file.FileName );

            var path = Path.Combine( Server.MapPath( "~/Junk/" ) , fileName );
            file.SaveAs( path );    
        }

    }
}
72
Uthaiah