Come faccio a far funzionare il plugin Uploadify di jQuery con ASP.NET MVC?

Question

Sto cercando di ottenere il plug-in jQuery, Uploadify , per lavorare con ASP. NET MVC.

Il plugin si presenta bene con il seguente frammento JavaScript:

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

Sembra che tutto vada bene. Se noti, lo " script " l'attributo è impostato su my / Placement / Upload, che è il mio controller di posizionamento e la mia azione di caricamento.

Il problema principale è che ho difficoltà a far scattare questa azione per ricevere il file. Ho impostato un punto di interruzione su quell'azione e quando seleziono un file da caricare, non viene eseguito.

Ho provato a cambiare la firma del metodo basandomi su questo articolo :

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

Ma questo non funziona ancora.

Qualcuno può aiutarmi a scrivere e ottenere correttamente la firma dell'azione del controller di caricamento in modo che si attivi effettivamente? Posso quindi gestire da solo la gestione dei dati del file. Ho solo bisogno di aiuto per far sparire l'azione del metodo.

Answer 1

public string Upload(HttpPostedFileBase FileData) {}

è corretto: il file caricato da uploadify verrà associato a FileData. Non è necessario accedere a Request.Files per recuperare il file, il che rende più difficile deridere e testare.

Se la tua azione non si attiva affatto (ad esempio prova a eseguire il debug e verifica se viene raggiunto un punto di interruzione all'interno del metodo), è molto probabile che il tuo problema sia il valore "script": stai eseguendo una directory virtuale? In tal caso, dovrai mettere il nome della directory in primo piano. Uploadify sta usando un percorso assoluto.

vale a dire. 'script:' / virtual_directory / Placement / Upload '

adesso uploadify sta inviando a http: // localhost / Placement / Upload .

prova anche a utilizzare il debugger di route ( http: // haacked .com / archive / 2008/03/13 / url-routing-debugger.aspx ) per verificare dove viene mappato il percorso.

Answer 2

Il problema potrebbe essere che devi specificare che l'azione su cui stai caricando è impostata su Pubblica ... non funzionerà con l'azione come azione Ottieni.

Quindi, questo:

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

Dovrebbe essere questo:

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

Inoltre, tieni presente che se lo stai utilizzando in un " login " sezione del tuo sito, dovresti dare un'occhiata qui per un bug noto con uploadify e autenticazione: http://geekswithblogs.net/apopovsky/archive/2009/05/06/working-around-flash-cookie-bug-in-asp .net-mvc.aspx

Inoltre, a parte, ci sono diversi modi in MVC per gestire i caricamenti di file (usando Request.Files secondo il suggerimento di Rory Fitzpatrick, oltre a passare il file HttpPostedFileBase come argomento nella definizione dell'azione). Non dovrebbe importare davvero per far funzionare Uploadify.

Answer 3

Non è così che dovevo implementare il caricamento dei file. Avevo un metodo di azione senza parametri che utilizzava l'oggetto Request corrente per immergermi nella raccolta di file postati.

Alcuni esempi di codice dalla mia implementazione:

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

Naturalmente, scrivere test per questo diventa un PITA. Devi prendere in giro diversi oggetti per farlo funzionare, ad esempio:

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

Sarebbe più semplice creare un'interfaccia nei file postati e solo deriderlo, con un'implementazione concreta iniettata nel tuo controller usando IoC.

Penso che questo sia stato in gran parte basato su questo post: Implement HTTP Carica con ASP.NET MVC compresi test e simulazioni

Answer 4

La mia soluzione completa a questo potrebbe risolvere il tuo problema. Spero che sia d'aiuto.

http: //zootfroot.blogspot. com / 2010/12 / MVC-file-upload-con-uploadify-with.html

Answer 5

Leggendo la documentazione, sembra che stia inviando una matrice di file. Hai provato:

public string Upload( HttpPostedFileBase[] fileData )

È anche possibile che il raccoglitore di modelli predefinito non funzioni con HttpPostedFileBase e dovrai utilizzare il meccanismo di Rory o scrivere il tuo raccoglitore di modelli.

Answer 6

Ecco la mia semplice Razor View (il layout master ha i bundle 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" />
}

Ecco il metodo di controllo

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

Questo è tutto!