Como faço para obter o plugin de upload do jQuery para trabalhar com o ASP.NET MVC?
-
05-07-2019 - |
Pergunta
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.
Solução
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.
Outras dicas
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.
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
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
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.
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!