Wie kann ich das Uploadify -Plugin von JQuery mit ASP.NET MVC bearbeiten?

Question

Ich bin gerade dabei, das Jquery -Plugin zu bekommen, Hochladen, um mit ASP.NET MVC zu arbeiten.

Ich habe das Plugin mit dem folgenden JavaScript -Snippet gut angezeigt:

<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>

Was so aussieht, als ob alles gut ist. Wenn Sie bemerken, wird das Attribut "Skript" auf meine Placement /Upload eingestellt. Dies ist mein Placement Controller und meine Upload -Aktion.

Das Hauptproblem ist, dass ich Schwierigkeiten habe, diese Aktion zu feuern, um die Datei zu empfangen. Ich habe einen Haltepunkt für diese Aktion festgelegt und wenn ich eine Datei zum Hochladen auswähle, wird sie nicht ausgeführt.

Ich habe versucht, die Methodensignatur basierend auf die Methode zu ändern Dieser Artikel:

public string Upload(HttpPostedFileBase FileData)
{
    /*
    *
    * Do something with the FileData
    *
    */
    return "Upload OK!";
}

Aber das schießt immer noch nicht.

Kann mir jemand helfen, die Signatur der Upload -Controller -Aktion korrekt zu schreiben und zu erhalten, damit sie tatsächlich feuern wird? Ich kann dann selbst mit den Dateidaten umgehen. Ich brauche nur Hilfe, um die Methode zu feuern.

Answer 1

public string Upload(HttpPostedFileBase FileData) {}

ist korrekt - Die von Uploadify hochgeladene Datei wird für versuchte. Es ist nicht erforderlich, in Request.files zu gelangen, um die Datei abzurufen - was es schwieriger macht, sich zu verspotten und zu testen.

Wenn Ihre Aktion überhaupt nicht abfeuert (dh Versuche Debugging und prüfen Sie, ob ein Haltepunkt innerhalb der Methode getroffen wird), dann ist Ihr Problem höchstwahrscheinlich der Wert "Skript" - laufen Sie unter einem virtuellen Verzeichnis? In diesem Fall müssen Sie den Namen des Verzeichnisses vorstellen. Uploadify verwendet einen absoluten Pfad.

IE 'Skript:'/virtual_directory/Placement/Upload '

Im Moment sendet Uploadify an http: // localhost/platzierung/hochladen.

Versuchen Sie auch den Routendebugger (http://haacked.com/archive/2008/03/13/url-routing-debugger.aspx) Um zu überprüfen, wohin Ihre Route zugeordnet wird.

Answer 2

Das Problem könnte sein, dass Sie angeben müssen, dass die Aktion, auf die Sie hochladen, auf Posten eingestellt ist. Es funktioniert nicht mit der Aktion als Handlung.

Also das:

public string Upload(HttpPostedFileBase FileData)
{
   //do something
}

Sollte Folgendes sein:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Upload(HttpPostedFileBase FileData)
{
   //do something
}

Beachten Sie außerdem, dass Sie hier nach einem bekannten Fehler mit Uploadify und Authentifizierung nach einem bekannten Fehler suchen sollten, wenn Sie dies in einem Abschnitt "angemeldet in" Ihrer Website verwenden: http://geekswithblogs.net/apopovsky/archive/2009/05/06/working-around--flash-cookie-bug-in-asp.net-mvc.aspx

Abgesehen davon gibt es in MVC verschiedene Möglichkeiten, Datei -Uploads zu verarbeiten (mit Request.files gemäß Rory Fitzpatricks Vorschlag sowie die Übergabe der HTTPPOStedFileBase -Datei als Argument in der Aktionsdefinition). Es sollte nicht wirklich eine Rolle spielen, um Uploadify zur Arbeit zu erhalten.

Answer 3

So musste ich überhaupt das Datei -Upload implementieren. Ich hatte eine Aktionsmethode ohne Parameter, die das aktuelle Anforderungsobjekt zum Eintauchen in die Sammlung veröffentlichter Dateien verwendeten.

Ein Beispielcode aus meiner Implementierung:

[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
    }
}

Natürlich wird das Schreiben von Tests dafür zu einer Pita. Sie müssen mehrere Objekte verspotten, um es zum Laufen zu bringen, zum Beispiel:

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);

Es wäre einfacher, eine Schnittstelle in die geposteten Dateien zu erstellen, und nur verspottet, die mit einer konkreten Implementierung, die Ihren Controller mit IOC injiziert wird, injiziert wird.

Ich denke, das basiert weitgehend auf diesem Beitrag: Implementierung des HTTP -Datei -Hochladens mit ASP.NET MVC einschließlich Tests und Mocks

Answer 4

Meine volle Lösung dafür könnte Ihr Problem lösen. Ich hoffe es hilft.

http://zootfroot.blogspot.com/2010/12/mvc-file-upload-using-uploadify-with.html

Answer 5

Wenn Sie die Dokumentation lesen, sieht es so aus, als würde sie eine Reihe von Dateien senden. Hast du es versucht:

public string Upload( HttpPostedFileBase[] fileData )

Es ist auch möglich, dass der Standardmodellbinder nicht mit httppostedFileBase funktioniert und Sie entweder den Mechanismus von Rory verwenden oder Ihren eigenen Modellbinder schreiben müssen.

Answer 6

Hier ist meine einfache Rasieransicht (der Layout -Master hat die JavaScript -Bündel)

@{
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" />
}

Hier ist die Contoller -Methode

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!");
    }

Das ist es!