En mayo de este año AjaxControlToolkit incluye un nuevo control AjaxFileUpload el cual soporta multiples subidas de archivos, progressbar y la funcionalidad Drag and Drop.
Estas nuevas caracteristicas son soportadas por Google Chrome version 16+, Firefox 8+ , Safari 5+ and Internet explorer 10 + , IE9 o versiones anteriores no soportan estas caracteristicas.
<style>
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=50);
opacity: 0.50;
}
.pnl{
background: #333;
padding: 10px;
border: 2px solid #ddd;
float: left;
font-size: 1.2em;
color:White;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
box-shadow: 0px 0px 20px #999; /* CSS3 */
-moz-box-shadow: 0px 0px 20px #999; /* Firefox */
-webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
border-radius:3px 3px 3px 3px;
-moz-border-radius: 3px; /* Firefox */
-webkit-border-radius: 3px; /* Safari, Chrome */
}
.close {
DISPLAY: block;BACKGROUND: url(Images/close.png) no-repeat 0px 0px;
LEFT: -12px;WIDTH: 26px;TEXT-INDENT: -1000em;POSITION: absolute;
TOP: -12px;HEIGHT: 26px;
}
</style>
<script type = "text/javascript">
function Success() {
document.getElementById("lblMessage").innerHTML = "File Uploaded";
}
function Error() {
document.getElementById("lblMessage").innerHTML = "Upload failed.";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"/>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnUpload" runat="server"
Text="Upload File" onclick="btnUpload_Click"/>
<asp:ModalPopupExtender runat="server"
ID="modelPopupExtender1"
TargetControlID="btnUpload"
PopupControlID="popUpPanel"
OkControlID="btOK"
BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>
<asp:Panel ID="popUpPanel" runat="server" CssClass="pnl">
<div style="font-weight: bold; border: Solid 3px Aqua;
background-color: AliceBlue">
<asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server"
OnUploadComplete="UploadComplete"
OnClientUploadComplete="Success"
ThrobberID="loader" Width="400px"/>
<asp:Image ID="loader" runat="server"
ImageUrl ="~/loading.gif"
Style="display:None"/>
</div><br /><br />
<asp:Label ID="lblMessage" runat="server"/><br /><br />
<asp:Button ID="btOK" runat="server" Text="OK" />
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="close"
OnClientClick="$find('modelPopupExtender1').hide(); return false;"/>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<br /><br />
</form>
</body>La propiedad ThrobberID del control AjaxFileUpload es utilizado para mostrar la imagen de cargando en vez de progress bar si el navegador no lo soportara.Algunos tipos de archivos pueden ser restringidos utilizando la propiedad AllowedFileTypes separados con comas de la siguiente forma "zip,doc,pdf".
El codigo de abajo es para el evento OnUploadComplete que guarda el archivo y lo enlazaremos al control AjaxFileUpload.
protected void UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
{
string filePath = "~/Images/" + e.FileName;
AjaxFileUpload1.SaveAs(MapPath(filePath));
}el boton que nos aparece al cargar el proyecto es para abrir la ventana la cual subira los archivos a la carpeta Images por la ruta que le indicamos en filePath. Espero les haya servido el ejemplo. Pueden descargar el codigo aqui
Hola XSaint, justo indagaba sobre este control, estoy usándolo en un proyecto donde solo necesito subir una foto, le agregue el MaximumNumberOfFiles=1, pero nada igual sigue subiendo sin límite, por lo menos lo probé con más de 5 y sigue subiendo, he probado con el tuyo y también sucede lo mismo, que podría estar pasando, o como podría controlar esto de alguna otra manera.
ResponderEliminarGracias
Te permite subir archivos de cualquier peso? es decir, si quiero subir un video de 1gb, te lo permite?
ResponderEliminar