Comment faire pour que le plugin Uploadify de jQuery fonctionne? ASP.NET MVC?
je suis en train d'essayer d'obtenir le plugin jQuery, Uploadify, pour travailler avec ASP.NET MVC.
j'ai le plugin qui se présente très bien avec le snippet JavaScript suivant:
<script type="text/javascript">
$(document).ready(function() {
$('#fileUpload').fileUpload({
'uploader': '/Content/Flash/uploader.swf',
'script': '/Placement/Upload',
'folder': '/uploads',
'multi': 'true',
'buttonText': 'Browse',
'displayData': 'speed',
'simUploadLimit': 2,
'cancelImg': '/Content/Images/cancel.png'
});
});
</script>
ce qui semble être bien. Si vous remarquez, l'attribut "script" est défini à mon /Placement/Upload, qui est mon contrôleur de Placement et mon action Upload.
le problème principal est, j'ai de la difficulté à obtenir cette action pour recevoir le fichier. J'ai mis un point de rupture sur cette action et quand je sélectionne un fichier à télécharger, il ne sera pas exécuté.
j'ai essayé de changer la signature de la méthode basée sur off cet article:
public string Upload(HttpPostedFileBase FileData)
{
/*
*
* Do something with the FileData
*
*/
return "Upload OK!";
}
Mais ce n'est toujours pas le feu.
est-ce que quelqu'un peut m'aider à écrire et à obtenir la signature de l'action du contrôleur de téléchargement correctement pour qu'elle démarre réellement? Je peux ensuite gérer moi-même le traitement des données du fichier. J'ai juste besoin d'aide pour avoir la méthode. l'action de l'incendie.
6 réponses
public string Upload(HttpPostedFileBase FileData) {}
est correct - le fichier téléchargé par uploadify sera lié à FileData. Pas besoin d'entrer dans la Demande.Fichiers pour récupérer le fichier - ce qui rend plus difficile de se moquer et de tester.
si votre action ne démarre pas du tout (c'est - à-dire essayez de déboguer et voyez si un point de rupture dans la méthode est touché), alors votre problème est très probablement la valeur 'script' - êtes-vous en cours d'exécution dans un répertoire virtuel? Si oui, vous aurez besoin de mettre le nom du répertoire. Uploadify est à l'aide d'un chemin d'accès absolu.
c'est à dire " le script: '/virtual_directory/Placement/Upload'
aujourd'hui uploadify envoyer à http://localhost/Placement/Upload.
essayez aussi d'utiliser le débogueur de route (http://haacked.com/archive/2008/03/13/url-routing-debugger.aspx) pour vérifier où votre itinéraire est cartographié.
Le problème est peut-être que vous avez besoin de spécifier l'action à télécharger pour est Post...il ne fonctionnera pas avec l'action comme une action.
Donc:
public string Upload(HttpPostedFileBase FileData)
{
//do something
}
Devrait être ceci:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Upload(HttpPostedFileBase FileData)
{
//do something
}
sachez Également que si vous utilisez cette dans un "connecté" section de votre site, vous devriez jeter un oeil ici pour un bug connu avec uploadify et d'authentification: http://geekswithblogs.net/apopovsky/archive/2009/05/06/working-around-flash-cookie-bug-in-asp.net-mvc.aspx
de plus, il y a plusieurs façons dans MVC de gérer les téléchargements de fichiers (en utilisant Request.Fichiers selon la suggestion de Rory Fitzpatrick, ainsi que passer le fichier HttpPostedFileBase comme argument dans la définition de l'action). Ça ne devrait pas vraiment avoir d'importance pour se charger de travailler.
ce n'est pas du tout comme ça que j'ai dû implémenter le téléchargement de fichiers. J'avais une méthode d'action sans paramètres qui utilisait l'objet Request courant pour plonger dans la collection de fichiers postés.
un exemple de code à partir de mon application:
[AcceptVerbs(HttpVerbs.Post)]
public ContentResult Upload() {
if (Request.Files.Count > 0 && Request.Files[0].ContentLength > 0) {
HttpPostedFileBase postedFile = Request.Files[0];
// Do something with it
}
}
bien sûr, écrire des tests pour cela devient un PITA. Vous devez vous moquer de plusieurs objets pour que cela fonctionne, par exemple:
var mockHttpContext = mocks.StrictMock<HttpContextBase>();
var mockRequest = mocks.StrictMock<HttpRequestBase>();
var postedFile = mocks.StrictMock<HttpPostedFileBase>();
var postedFileKeyCollection = mocks.StrictMock<HttpFileCollectionBase>();
mockHttpContext.Expect(x => x.Request).Return(mockRequest).Repeat.Any();
mockRequest.Expect(x => x.Files).Return(postedFileKeyCollection).Repeat.Any();
postedFileKeyCollection.Expect(x => x[0]).Return(postedFile).Repeat.Any();
postedFileKeyCollection.Expect(x => x.Count).Return(1);
postedFile.Expect(f => f.ContentLength).Return(1024);
postedFile.Expect(f => f.InputStream).Return(null);
Il serait plus facile de créer une interface dans les fichiers publiés et seulement maquette, avec une mise en œuvre concrète injecté dans votre contrôleur à l'aide du Cio.
je pense que c'était en grande partie basé sur ce post: implémenter le téléchargement de fichiers HTTP avec ASP.NET MVC y compris les essais et les Mocks
ma solution complète pourrait résoudre votre problème. Espérons que cela aide.
http://zootfroot.blogspot.com/2010/12/mvc-file-upload-using-uploadify-with.html
en lisant la documentation, on dirait qu'elle envoie un tableau de fichiers. Avez-vous essayé:
public string Upload( HttpPostedFileBase[] fileData )
il est également possible que le classeur de modèle par défaut ne fonctionne pas avec HttpPostedFileBase et que vous ayez besoin d'utiliser le mécanisme de Rory ou d'écrire votre propre classeur de modèle.
voici ma vue simple au rasoir (Layout master possède les paquets Javascript)
@{
ViewBag.Title = "Upload Email CSV";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript" src="@Url.Content("~/Scripts/Uploadify/jquery.uploadify.js")"></script>
<script type="text/javascript">
$(function () {
var uploadUrl = "@Url.Content("~/UploadFile/UploadEmailCSV/")";
var uploadSWF = "@Url.Content("~/Scripts/Uploadify/uploadify.swf")";
var uploadifyButtonImage = "@Url.Content("~/Scripts/Uploadify/uploadify.swf")";
$('#file_upload').uploadify({
'fileSizeLimit': '0',
'buttonImage': '/uploadify/browse-btn.png',
'swf': uploadSWF,
'uploader': uploadUrl,
'onUploadSuccess': function(file, data, response) {
alert('The file was saved to: ' + data);
}
});
});
</script>
<h2>Upload a comma separated list of email addresses</h2>
@using (Html.BeginForm("UploadEmailCSV", "UploadFile", FormMethod.Post, new { @class = "form-horizontal", @enctype = "multipart/form-data", @id = "frmUploadFiles" }))
{
<input type="file" name="file_upload" id="file_upload" />
}
Voici la méthode Contoller
public ActionResult UploadEmailCSV()
{
var uploadedFile = Request.Files["Filedata"];
if (uploadedFile != null && uploadedFile.ContentLength > 0)
{
var filePath = Path.Combine(Server.MapPath("~/UploadedFiles"), string.Format("{0}_{1}{2}", Path.GetFileNameWithoutExtension(uploadedFile.FileName), DateTime.Now.Ticks, Path.GetExtension(uploadedFile.FileName)));
uploadedFile.SaveAs(filePath);
return Content(string.Format("{0}_{1}{2}", Path.GetFileNameWithoutExtension(uploadedFile.FileName), DateTime.Now.Ticks, Path.GetExtension(uploadedFile.FileName)));
}
return Content("Error Uploading file!");
}
c'est elle!