Como faço para obter o plugin de upload do jQuery para trabalhar com o ASP.NET MVC?

Question

Estou no processo de tentar obter o plugin jQuery, Carregar, para trabalhar com o ASP.NET MVC.

Eu tenho o plugin aparecendo bem com o seguinte snippet 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>

O que parece que tudo está bem em boa. Se você perceber, o atributo "script" está definido como meu /posicionamento /upload, que é o meu controlador de colocação e minha ação de upload.

O principal problema é que estou tendo dificuldade em fazer com que essa ação seja disparada para receber o arquivo. Definei um ponto de interrupção nessa ação e, quando seleciono um arquivo para fazer upload, ele não é executado.

Eu tentei mudar a assinatura do método baseada Este artigo:

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

Mas isso ainda não dispara.

Alguém pode me ajudar a escrever e obter a assinatura do controlador de upload corretamente para que ela realmente dispare? Eu então posso lidar com os dados do arquivo. Eu só preciso de ajuda para obter a ação do método para disparar.

Answer 1

public string Upload(HttpPostedFileBase FileData) {}

está correto - o arquivo enviado pelo Uploady será o BIMIND para arquivado. Não há necessidade de entrar no solicitação.Files para recuperar o arquivo - o que torna mais difícil zombar e testar.

Se sua ação não estiver disparando (ou seja, tente depurar e ver se um ponto de interrupção dentro do método é atingido), seu problema provavelmente é o valor do 'script' - você está executando em um diretório virtual? Nesse caso, você precisará colocar o nome do diretório na frente. O uploadrifício está usando um caminho absoluto.

ou seja, 'script:'/virtual_directory/posicionamento/upload '

No momento, o uploady está enviando para http: // localhost/posicionamento/upload.

Tente também usar o depurador de rota (http://haacked.com/archive/2008/03/13/url-ruting-debugger.aspx) para verificar onde sua rota está sendo mapeada.

Answer 2

O problema pode ser que você precisa especificar que a ação para a qual você está carregando está definida para postar ... não funcionará com a ação como uma ação GET.

Então, é isso:

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

Deve ser o seguinte:

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

Além disso, lembre -se de que, se você estiver usando isso em uma seção "conectada" do seu site, você deve dar uma olhada aqui para um bug conhecido com o upload e a autenticação: http://geekswithblogs.net/apopovsky/archive/2009/05/06/working-around-flash-cookie-bug-in-asp.net-mvc.aspx

Além disso, apenas um aparte, existem várias maneiras no MVC para lidar com uploads de arquivos (usando o request.files conforme a sugestão de Rory Fitzpatrick, além de passar o arquivo httppotedfilebase como um argumento na definição de ação). Realmente não deve importar para se fazer o upload para funcionar.

Answer 3

Não é assim que eu tive que implementar o upload de arquivos. Eu tinha um método de ação sem parâmetros que usavam o objeto de solicitação atual para mergulhar na coleção de arquivos postados.

Algum código de amostra da minha implementação:

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

Obviamente, escrever testes para isso se torna uma pita. Você precisa zombar de vários objetos para fazê -lo funcionar, por exemplo:

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

Seria mais fácil criar uma interface nos arquivos postados e zombar disso, com uma implementação concreta injetada no seu controlador usando o IOC.

Eu acho que isso foi amplamente baseado neste post: Implementando o upload de arquivos HTTP com o ASP.NET MVC, incluindo testes e maquetes

Answer 4

Minha solução completa para isso pode resolver seu problema. Espero que ajude.

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

Answer 5

Lendo a documentação, parece que está enviando uma variedade de arquivos. Você tentou:

public string Upload( HttpPostedFileBase[] fileData )

Também é possível que o fichário do modelo padrão não funcione com o HTTPPOSTEDFILEBASE e você precisará usar o mecanismo de Rory ou escrever seu próprio fichário de modelo.

Answer 6

Aqui está minha visão simples de barbear (o mestre do layout tem os pacotes de 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" />
}

Aqui está o método do contollador

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

É isso!