Publication d’une image à l’aide d’un appel AJAX jQuery à une action MVC

J’ai le code suivant:

$("#preview").click(function () { $.ajax({ type: 'POST', url: '@Url.Action("Preview")', data: { color: $("#color-picker").val(), logo: $("#fileInput")[0].files[0] }, success: function (data) { alert("Success!"); }, dataType: "json" }); });

Qui utilise cet élément:

Qui tente de publier une image sur cette action MVC:

 [HttpPost] public async Task Preview(ssortingng color, HttpPostedFileBase logo) { return Json("Success."); }

Malheureusement, lorsque je poste, je reçois Uncaught TypeError: Illegal invocation dans les journaux de Chrome. Cette erreur provient du côté jQuery des choses en fonction de la trace de la stack. Il n’y a rien de mal avec $("#color-picker").val() ni avec $("#fileInput")[0].files[0] lorsque je les vérifie dans la surveillance des outils de développement Chrome avant l’appel (un est une ssortingng avec le code de couleur approprié, l’autre est un File ).

J’ai résolu le problème pour trouver la raison pour laquelle cela se produit. C’est parce que j’essaie de passer $("#fileInput")[0].files[0] tant que paramètre, mais j’obtiens la même erreur lorsque j’essaie de le faire de cette manière en ajoutant le fichier. J’utilise la dernière version de Chrome et j’ai recherché un moyen de faire passer une image un peu. J’ai vérifié de nombreuses questions sur Stack Overflow pour tenter de trouver une solution, mais je n’ai pas trouvé le moyen de télécharger ce fichier.

Est-ce que quelqu’un sait quel type de problème de sécurité empêche le téléchargement de fichiers de ce type et comment je peux télécharger une image de la même manière ou par quel moyen le faire? Quelles sont les alternatives? Je n’arrive pas à faire fonctionner quelque chose jusqu’à présent que je suis tombé sur Stack.

vous pouvez faire quelque chose comme ça en javascript

 var fd = new FormData(); var files = $("#fileInput").get(0).files; if(files.lenght > 0){ fd.append("logo",files[0]); } $.ajax({ type: 'POST', url: '@Url.Action("Preview")', data:fd, processData: false, contentType: false, dataType: "json", success: function (data) { alert("Success!"); } });

sur le contrôleur, vous pouvez obtenir une image comme celle-ci

 if (System.Web.HttpContext.Current.Request.Files.AllKeys.Any()) { var picture = System.Web.HttpContext.Current.Request.Files["logo"]; }