Upload de múltiplos arquivos com jQuery em Asp.Net

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (0)  (0)

Bem vindos a mais um artigo sobre asp.net e jQuery nesse artigo pretendo mostrar como utilizar o plugin MultFile do jQuery na qual ajuda muito na hora que precisamos subir mais de um arquivo para o servidor.

Como sempre o jQuery é incrível nesse artigo vou mostrar como fazer upload de múltiplos arquivos  isso é possível com nosso amigo jQuery que monta uma fila de espera aonde o método  HttpFileCollection, nos conseguimos guarda as informações  de todos os arquivos que passaram pelo FileUpload usando o Request.Files .

Primeiro abaixe o projeto ou somente os arquivos jQuery para nos consegui usar a função multiUpload do arquivo jquery.MultiFile, após ter abaixado coloque os seguintes webcontrols na nossa página aspx .

1 – FileUpload

2- Button

Importante: No FileUpload coloque a seguinte Class multi aonde o jQuery vai pegar os arquivos carregados pelo o usuário e montar uma fila de espera abaixo.

O Seu código vai ficar mais ou menos dessa maneira.


01<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
02 CodeFile="Default.aspx.cs" Inherits="_Default" %>
03 
04<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
05 <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
06 <script src="Scripts/jquery.MultiFile.js" type="text/javascript"></script>
07</asp:Content>
08<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
09 
10 <div>
11 <asp:FileUpload ID="FileUpload1" runat="server"  />
12 <asp:Button ID="Button1" runat="server" Text="Upload" onclick="Button1_Click" />
13 </div>
14</asp:Content>

clique na imagem para visualizar melhor

Após ter inserido os controles clique duas vezes no Button para ele criar um evento click.

Segundo passo e importa a namespace System.IO para trabalhar com arquivos podendo manipular eles obtendo nome, diretório, salvando eles em diretórios específicos etc.

Depois vai no nosso evento clique e coloque o seguinte código como mostra o código abaixo.


01protected void Button1_Click(object sender, EventArgs e)
02{
03 
04try
05{
06//Metodo que organiza os arquivos carregado pelo cliente e monta uma coleção de arquivos passados pelo FileUpload
07HttpFileCollection hfc = Request.Files;
08 
09for (int i = 0; i < hfc.Count; i++)
10{
11 
12//Metodo HttpPostedFile ao contrario do httpFileCollection ele fornece
13//as informações de um arquivo para ler ou ser salvo.
14HttpPostedFile hpf = hfc[i];
15FileUpload1.SaveAs(Server.MapPath("Files") + "\\" + System.IO.Path.GetFileName(hpf.FileName));
16Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "Sucesso", "alert('Upload efetuado com sucesso')", true);
17 
18//Caso quera o nome dos arquivos para salvar no banco a linha abaixo informa os nomes
19//string nameFiles = hpf.FileName;
20}
21 
22}
23catch (Exception ex)
24{
25Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "Erro", "alert('"+ex.Message+"')", true);
26 
27}
28}

Depois crie um diretório no seu projeto com o nome Files ou de sua escolha lembre de altera o nome do diretório caso troque no código também para funcionar.

Importante: abra a web.config na  e coloque o seguinte linha na System.web

<httpRuntime maxRequestLength=”100000″/>

Para você conseguir fazer upload de arquivos grandes até 100MB.

clique na imagem para visualizar melhor

Código fonte: http://uploaddearquivos.com.br/download/UploadMultFiles.rar

Arquivos jQuery : http://uploaddearquivos.com.br/download/Arquivos-JQuery.rar

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?