• Follow us on Twitter
  • Join our Facebook Group
  • Join me on Google Plus
  • Add me on Linkedin
  • RSS

  • Home
  • Séries
    • Entity Framework
    • Minhas Palestras
    • ASP .NET MVC
  • Meus Repositórios
    • CodePlex
    • GitHub

Blog - Latest News

Usando Plupload com ASP.NET MVC

6 Comments/ in ASP.Net / by Cleyton Ferrari
24 de junho de 2012

Neste post você vera como fazer upload de vários arquivos de uma única vez utilizando Plupload e o ASP.NET MVC, a API do Plupload permite enviar os arquivos utilizando HTML5, Silverlight, Flash, ou um simples form em HTML, exibe barra de progresso e redimensiona as imagens.

Para iniciar esse tutorial você devera ter instalado em sua máquina o Visual Studio 2012 (pode utilizar o Visual Studio 2010) e baixar o Plupload do site oficial.

Como de costume o código deste exemplo está no meu GitHub.

  • Se você ainda não viu as Vídeo-Aulas da Série ASP.NET MVC aprovei e veja também!

Primeiro vamos criar um novo projeto em ASP.NET MVC 4 Web Application no Visual Studio 2012, vamos chama-lo de PLUploadMVC e escolher o template Basic (O mesmo que o template Empty, so que já inclui algumas bibliotecas JavaScript), não esqueça de Escolher a View Engine Razor.

Como estamos utilizando o Visual Studio 2012 RC e ele possui os Bundles que carregam os scripts para nós, temos que alterar a ordem do RenderBody() no _Layout.cshtml para que fique como apresentado abaixo:






    @ViewBag.Title
    @Styles.Render("~/Content/themes/base/css", "~/Content/css")
    @Scripts.Render("~/bundles/modernizr")


 @Scripts.Render("~/bundles/jquery")

 @RenderBody()

 @RenderSection("scripts", required: false)


Agora vamos baixar o PlUpload com o tipo de licença GPLv2, uma vez baixado descompacte o arquivo e copie a pasta plupload para dentro da pasta Scripts do seu projeto. Aproveite e crie uma pasta chamada Uploads dentro da pasta Content, este vai ser o local onde vamos enviar as fotos.

De volta ao Visual Studio, selecione o Projeto, e depois exiba todos os arquivos (Show All Files), e clique com o botão direito do mouse sobre a pasta plupload e escolha a opção Include In Project, para incluir esta pasta em nosso projeto.

Agora que já temos o PlUpload em nosso projeto, vamos adicionar um novo Controller chamado Home (Na opção de Scaffolding Options, lembre-se de escolher Empty MVC controller) e adicionar o seguinte código a ele:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web.Mvc;

namespace PLUploadMVC.Controllers
{
    public class HomeController : Controller
    {
        /*Exibe a página inicial do nosso exemplo*/
        public ActionResult Index()
        {
            string path = HttpContext.Server.MapPath("~/Content/Uploads/");
            var diretorio = new DirectoryInfo(path);
            var arquivos = diretorio.GetFiles("*.*");
            IList listaDeArquivos = arquivos.Select(fileinfo => fileinfo.Name).ToList();
            ViewBag.Arquivos = listaDeArquivos;
            return View();
        }

        /*Exibe um exemplo mais simples de uso do plupload*/
        public ActionResult Personalizado()
        {
            return View();
        }

        /*Exibe o exemplo completo de uso do plupload*/
        public ActionResult Completo()
        {
            return View();
        }

        /*Action usada pelo plupload para enviar os arquivos*/
        [HttpPost]
        public ActionResult Upload(int? chunk, string name)
        {
            //Arquivo que o PlUpload envia.
            var fileUpload = Request.Files[0];
            //Local onde vai ficar as fotos enviadas.
            var uploadPath = Server.MapPath("~/Content/Uploads");
            //Faz um checagem se o arquivo veio correto.
            chunk = chunk ?? 0;

            var uploadedFilePath = Path.Combine(uploadPath, name);

            //faz o upload literalmetne do arquivo.
            using (var fs = new FileStream(uploadedFilePath, chunk == 0 ? FileMode.Create : FileMode.Append))
            {
                var buffer = new byte[fileUpload.InputStream.Length];
                fileUpload.InputStream.Read(buffer, 0, buffer.Length);
                fs.Write(buffer, 0, buffer.Length);
            }

            return Content("Success", "text/plain");
        }

    }
}

Neste código temos quatro Actions que nos auxilia em nossa demonstração, as 3 primeiras são utilizadas para criar as nossas páginas de exemplo, a Ultima (Upload) é utilizada pelo PlUpload para enviar as fotos para o nosso servidor.

Continuando precisamos criar as Views das três primeiras Actions do nosso controller Home, vamos lá então:

Código da página inicial do nosso exemplo, nossa View Index.

@{
    ViewBag.Title = "Usando o PlUplaod com ASP.NET MVC 4";
}</pre>
<h2>Escolha um dos exemploas abaixo</h2>
<ul>
	<li>@Html.ActionLink("Personalizado", "Personalizado", "Home")</li>
	<li>@Html.ActionLink("Completo", "Completo", "Home")</li>
</ul>
<h2>Listas de Arquivos Enviados</h2>
<ul>
<ul><!-- Recebe uma lista de arquivos do diretorio Content/Uploads e lista-os --></ul>
</ul>
&nbsp;
<ul>
<ul>@foreach (var path in ViewBag.Arquivos)</ul>
</ul>
&nbsp;
<ul>
<ul>{</ul>
</ul>
<img src="@Url.Content(" alt="" width="250px" />
<ul>}</ul>
<pre>

Nada de especial nesta view, recebemos um lista de arquivos da ViewBag e mostramos eles em nossa página.

Agora vamos criar nossa View Personalizado, para isso digite o seguinte código após criar a view:

@{
    ViewBag.Title = "Upload Personalizado";
}

<!--Load plupload and all its runtime scripts-->
<script type="text/javascript" src="@Url.Content("></script><script type="text/javascript">// <![CDATA[
    /*Este exemplo foi retirado do proprio site do PlUpload*/
    $(document).ready(function () {
        var uploader = new plupload.Uploader({
            runtimes: 'flash,html5,silverlight',
            browse_button: 'pickfiles',
            container: 'container',
            max_file_size: '2048mb',

            /*ESTES É A ACTION QUE VAMOS USAR PARA OS UPLOADS*/
            url: '@Url.Action("upload", "Home")',

            flash_swf_url: '../../Scripts/plupload/js/plupload.flash.swf',
            silverlight_xap_url: '../../Scripts/plupload/js/plupload.silverlight.xap',
            filters: [
                { title: "Image files", extensions: "jpg,gif,png" },
                { title: "Zip files", extensions: "zip" }
            ]
        });

        uploader.bind('Init', function (up, params) {
            $('#filelist').html("
<div>Current runtime: " + params.runtime + "</div>

");
        });

        $('#uploadfiles').click(function (e) {
            uploader.start();
            e.preventDefault();
        });

        uploader.init();

        uploader.bind('FilesAdded', function (up, files) {
            $.each(files, function (i, file) {
                $('#filelist').append('

<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' + '</div>

');
            });

            up.refresh(); // Reposition Flash/Silverlight
        });

        uploader.bind('UploadProgress', function (up, file) {
            $('#' + file.id + " b").html(file.percent + "%");
        });

        uploader.bind('Error', function (up, err) {
            $('#filelist').append("
<div>Error: " + err.code + ", Message: " + err.message + (err.file ? ", File: " + err.file.name : "") + "</div>

");

            up.refresh(); // Reposition Flash/Silverlight
        });

        uploader.bind('FileUploaded', function (up, file) {
            $('#' + file.id + " b").html("100%");
        });
    });
// ]]></script></pre>
<h2>Personalizado</h2>
<div id="container">
<div id="filelist">Não foi encontrado o runtime</div>
 <a id="pickfiles" href="#">[Selecionar Arquivos]</a>
 <a id="uploadfiles" href="#">[Enviar Arquivos]</a></div>
<ul>
	<li>@Html.ActionLink("Voltar", "Index", "Home")</li>
</ul>
<pre>

Neste código que foi retirado do site do PlUpload, o que realmente importa é qual será a nossa action de Upload, o restante é configuração do PlUpload.

Agora vamos a nossa ultima view, a View Completo, após adicionar a view, acrescente o seguinte código a mesma.

@{
    ViewBag.Title = "Completo";
}</pre>
<h2>Completo</h2>
<pre>
<!--Load plupload and all its runtime scripts-->
<script type="text/javascript" src="@Url.Content("></script><script type="text/javascript" src="@Url.Content("></script>
<script type="text/javascript">// <![CDATA[
    // Convert divs to queue widgets when the DOM is ready
    $(function () {
        $("#uploader").pluploadQueue({
            // General settings
            runtimes: 'flash,silverlight,browserplus,html5',

            max_file_size: '10mb',
            chunk_size: '1mb',
            unique_names: true,

            // Resize images on clientside if we can
            resize: { width: 320, height: 240, quality: 90 },

            // Specify what files to browse for
            filters: [
                { title: "Image files", extensions: "jpg,gif,png" },
                { title: "Zip files", extensions: "zip" }
            ],
            url: '@Url.Action("upload", "Home")',
            flash_swf_url: '../../Scripts/plupload/js/plupload.flash.swf',
            silverlight_xap_url: '../../Scripts/plupload/js/plupload.silverlight.xap',
        });

        // Client side form validation
        $('form').submit(function (e) {
            var uploader = $('#uploader').pluploadQueue();

            // Files in queue upload them first
            if (uploader.files.length > 0) {
                // When all files are uploaded submit form
                uploader.bind('StateChanged', function () {
                    if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                        $('form')[0].submit();
                    }
                });

                uploader.start();
            } else {
                alert('You must queue at least one file.');
            }

            return false;
        });
    });
// ]]></script></pre>
<div id="uploader">
 Seu browser não suporta Flash, Silverlight, Gears, BrowserPlus ou HTML5.</div>
<ul>
	<li>@Html.ActionLink("Voltar", "Index", "Home")</li>
</ul>
<pre>

Este código exibe o PlUpload completo, onde já vem com uma interface padrão para listar os arquivos selecionados e exibe o progresso do envio e a opção para cancelar o arquivo e a ação como um todo.

Bom pessoal era isso que tínhamos para ver neste artigo, o PlUpload é um excelente plugin de uploads, utilizo ele a muito tempo, desde o tempo do PHP, é claro que podemos fazer muito mais, como por exemplo adicionar uma marca d’água em nossas fotos, redimensiona-las em vários tamanhos mas isso é assunto para outro artigo.

Fiquem na Paz e até a próxima.

Tags: .net, asp.net, razor
← Vídeo-Aula ASP.Net MVC na prática – Parte 1
Vídeo-Aula ASP.Net MVC na prática – Parte 2 →
Related Posts
Vídeo-Aula ASP.Net MVC na prática – Parte 3
Vídeo-Aula ASP.Net MVC na prática – Parte 8...
Vídeo-Aula ASP.Net MVC na prática – Parte 2
Vídeo-Aula ASP.Net MVC na prática – Parte 8...

Google+

376Follower
Popular
  • Vídeo-Aula ASP.Net MVC na prática – Parte 1junho 18, 2012, 9:13 pm
  • Validação de Data e Moeda (ASP.Net MVC + JQuery Validation)...janeiro 31, 2013, 11:27 am
  • Vídeo-Aula ASP.Net MVC na prática – Parte 6janeiro 12, 2013, 3:50 pm
  • Rotativa W7 gerando relatórios em PDF no ASP.Net MVCdezembro 26, 2012, 5:53 pm
  • Vídeo-Aula ASP.Net MVC na prática – Parte 9-1setembro 27, 2013, 6:00 pm
Recent
  • Visual StudioVisual Studio 2015julho 20, 2015, 7:57 pm
  • MySQL com ASP.Net MVCmaio 6, 2015, 4:16 pm
  • Vídeo-Aula ASP.Net MVC na prática – Parte 9-3março 29, 2014, 3:14 pm
  • Vídeo-Aula ASP.Net MVC na prática – Parte 9-2janeiro 26, 2014, 9:56 am
  • Vídeo-Aula ASP.Net MVC na prática – Parte 9-1setembro 27, 2013, 6:00 pm
Comments
  • ótimo, agora concidera vírgula como decimal, porém a...janeiro 31, 11:27 am by gilmar
  • Parabéns pelo artigo Cleyton, para utilizar a sua solução...janeiro 31, 11:27 am by Braytiner Heggendorn
  • Certo Danilo! Muito obrigado pela dica!!janeiro 31, 11:27 am by José Furtado
  • Olá José, tudo bem? Então, trabalhando em um projeto...janeiro 31, 11:27 am by Danilo Miranda
  • Olá Danilo! Hoje enfrento o mesmo problema que você, já...janeiro 31, 11:27 am by José Furtado
Tags
.net alsummit asp.net clean code complexidade comunidade CSharp EF evento hyper-v IISExpress jQuery metro MVC MySQL nuget razor Rotativa W7 SignalR SQL TDD TechEd Testes Unitários TFS11 TFS2012 Visual Studio VS2012 Vídeo-Aula windows8 wp7

Series

  • ASP.Net MVC (16)
  • Entity Framework (4)
  • Minhas Palestras (1)

Interesting links

Besides are some interesting links for you! Enjoy your stay :)

Últimos Comentários

  • gilmar em Validação de Data e Moeda (ASP.Net MVC + JQuery Validation) em Português
  • Braytiner Heggendorn em Validação de Data e Moeda (ASP.Net MVC + JQuery Validation) em Português
© Copyright - Cleyton Ferrari - Wordpress Theme by Kriesi.at