FileUpload - múltiplos arquivos - versão ajax

<< Click to Display Table of Contents >>

Navigation:  ASP.NET > ASP Controls > FileUpload - Múltiplos Arquivos >

FileUpload - múltiplos arquivos - versão ajax

Previous pageReturn to chapter overviewNext page

Telas

 

Primeira:

fileupload7

Selecionar arquivos:

fileupload8

 

Após selecionar os arquivos:

fileupload9

Subindo:

fileupload1

Pronto:

fileupload0

 

aspx

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1" %>

 

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

 

<!DOCTYPE html>

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <style type="text/css">

        body

        {

            font-familyArial;

        }

 

        .ajax__fileupload_fileItemInfo div.removeButton

        {

            width100px;

        }

 

        div.ajax__fileupload_uploadbutton

        {

            width125px;

        }

 

        .ajax__fileupload .ajax__fileupload_selectFileContainer

        {

            width110px;

        }

 

        .ajax__fileupload_selectFileContainer .ajax__fileupload_selectFileButton

        {

            width110px;

        }

    </style>

 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script type="text/javascript">

        // run AjaxFileUpload_change_text() function after page load

        $(document).ready(function () {

            AjaxFileUpload_change_text();

        });

 

        function AjaxFileUpload_change_text() {

            Sys.Extended.UI.Resources.AjaxFileUpload_SelectFile = "Selecione arquivos";

            Sys.Extended.UI.Resources.AjaxFileUpload_DropFiles = "Arraste arquivos para cá";

            Sys.Extended.UI.Resources.AjaxFileUpload_Pending = "pendente";

            Sys.Extended.UI.Resources.AjaxFileUpload_Remove = "Remover";

            Sys.Extended.UI.Resources.AjaxFileUpload_Upload = "Subir";

            Sys.Extended.UI.Resources.AjaxFileUpload_Uploaded = "Subiu";

            Sys.Extended.UI.Resources.AjaxFileUpload_UploadedPercentage = "subindo {0} %";

            Sys.Extended.UI.Resources.AjaxFileUpload_Uploading = "Subindo";

            Sys.Extended.UI.Resources.AjaxFileUpload_FileInQueue = "{0} arquivos(s) na fila.";

            Sys.Extended.UI.Resources.AjaxFileUpload_AllFilesUploaded = "Todos arquivos subiram.";

            Sys.Extended.UI.Resources.AjaxFileUpload_FileList = "Lista de arquivos:";

            Sys.Extended.UI.Resources.AjaxFileUpload_SelectFileToUpload = "Selecione os arquivos para subir.";

            Sys.Extended.UI.Resources.AjaxFileUpload_Cancelling = "Cancelando...";

            Sys.Extended.UI.Resources.AjaxFileUpload_UploadError = "Um erro ocorreu.";

            Sys.Extended.UI.Resources.AjaxFileUpload_CancellingUpload = "Cancelando...";

            Sys.Extended.UI.Resources.AjaxFileUpload_UploadingInputFile = "Subindo arquivo: {0}.";

            Sys.Extended.UI.Resources.AjaxFileUpload_Cancel = "Cancelar";

            Sys.Extended.UI.Resources.AjaxFileUpload_Canceled = "cancelado";

            Sys.Extended.UI.Resources.AjaxFileUpload_UploadCanceled = "Upload cancelado";

            Sys.Extended.UI.Resources.AjaxFileUpload_DefaultError = "Erro";

            Sys.Extended.UI.Resources.AjaxFileUpload_UploadingHtml5File = "Subindo arquivo: {0} tamanho: {1} bytes.";

            Sys.Extended.UI.Resources.AjaxFileUpload_error = "erro";

        }

    </script>

</head>

<body>

    <form id="form1" runat="server" enctype="multipart/form-data">

        <asp:ToolkitScriptManager ID="ScriptManager1" runat="server">

        </asp:ToolkitScriptManager>

        <div style="width960px">

            <asp:Label runat="server" ID="myThrobber" Style="displaynone;">

                <img align="absmiddle" alt="" src="http://www.ceunes.ufes.br/intranetnova/imagens/processing.gif"/></asp:Label>

            <asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server"

                OnUploadComplete="AjaxFileUpload1_UploadComplete" ThrobberID="myThrobber" MaximumNumberOfFiles="10" AllowedFileTypes="jpg,jpeg,png,mp3,txt" OnUploadCompleteAll="AjaxFileUpload1_UploadCompleteAll" />

        </div>

    </form>

</body>

</html>

 

cs

 

using System;

using System.IO;

using System.Web;

 

namespace WebApplication3

{

    public partial class WebForm1 : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

        }

 

        protected void AjaxFileUpload1_UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)

        {

            string filePath = "~/Upload/";

            string path = filePath + e.FileName;

            AjaxFileUpload1.SaveAs(Server.MapPath(filePath) + e.FileName);

        }

 

        protected void AjaxFileUpload1_UploadCompleteAll(object sender, AjaxControlToolkit.AjaxFileUploadCompleteAllEventArgs e)

        {

            Response.Redirect("http://www.market.com.br");

        }

    }

}

 

Web.config

 

<?xml version="1.0" encoding="utf-8"?>

 

<configuration>

    <system.webServer>

        <validation validateIntegratedModeConfiguration="false" />

        <handlers>

            <add name="AjaxFileUploadHandler" verb="*" path="AjaxFileUploadHandler.axd" type="AjaxControlToolkit.AjaxFileUploadHandler, AjaxControlToolkit" />

        </handlers>

    </system.webServer>

    <system.web>

        <compilation debug="true" targetFramework="4.5" />

        <httpRuntime targetFramework="4.5" maxRequestLength="80192" />

        <httpHandlers>

            <add verb="*" path="AjaxFileUploadHandler.axd"

              type="AjaxControlToolkit.AjaxFileUploadHandler, 

          AjaxControlToolkit"/>

        </httpHandlers>

        <pages>

            <controls>

                <add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" />

            </controls>

        </pages>

    </system.web>

</configuration>

 

Projeto

 

fileupload10

 

Observações

 

Tem que instalar o pacote AjaxControlToolkit

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Default.aspx