ASP.Net: Upload Files mit Ajax Controls von Telerik
Wie erstellt man einen Fileupload in ASP.Net mit Ladeanzeige.
Zum Hochladen von Dateien zu einer Webseite mit einem Browser sind Controls von Drittanbietern wie Telerik und DevControls sehr zu empfehlen.
Das Upload Control zeigt während des Datetransfers den Ladezustand an und speichert die Datei beim Upload temporär zwischen.
Zusätzlich zeigt das Upload Control nach dem Hochladen von Dateien die Dateien als Files direkt im Uploadverzeichnis an und ermöglicht dort ein löschen mit Remove.
Betrifft:
Microsoft ASP.Net mit Ajax.
Upload Controls von Telerik, ASP.Net Webforms , vb.net, visual Basic .net
Zum Verwenden eines File Uploads auf eine Webseite bettet man am Besten das Upload Control von Telerik ein.
Das Upload Control
<span style="font:bold;color:blue"><b>Videos</b> hochladen:</span>
<telerik:RadAsyncUpload ID="ctlUpload_Videos" runat="server" Culture="de-DE" DropZones="mov,mp4" MultipleFileSelection="Automatic" Skin="Telerik"
OnFileUploaded="ctlUpload_Videos_FileUploaded">
<FileFilters>
<telerik:FileFilter Description="Videos(mp4,mov)" Extensions="mov,mp4" />
</FileFilters>
</telerik:RadAsyncUpload>
|
Nach dem eine Datei hochgeladen wurde entsteht der Event
FileUploaded
Sofern dieser Upload als gültig erkannt wird, kann eine Aktion ausgeführt werden.
Protected Sub ctlUpload_Videos_FileUploaded(sender As Object, e As FileUploadedEventArgs) Handles ctlUpload_Videos.FileUploaded
'------------< ctlUpload_Videos_VideoUploaded() >------------
If e.IsValid = True Then
fl_Video_anfuegen(e)
End If
'------------</ ctlUpload_Videos_VideoUploaded() >------------
End Sub
|
Zum Upload muss man dann einen Zielbereich bereit haben, unter welchem dann die hochgeladenen Elemente gespeichert werden können
Den Pfad auf dem Server ermittelt man mit Server.MapPath.
Dadurch wird ein Verzeichnis unterhalb der Website zurückgegeben.
Dim sPfad As String
sPfad = Server.MapPath("~/Daten/Videos/")
|
Wenn die Datei dann verarbeitet werden soll, dann wird in der Regel die Datei als Datensatz gespeichert und als Datei vom Temporären Verzeichnis ins Zielverzeichnis kopiert.
Der Dateiname und das Uploadverzeichnis kann direkt aus dem FileUploaded Argument entnommen werden
Dim objStream As IO.FileStream = e.File.InputStream
Dim sFilename_with_Path As String = objStream.Name
Dim sFilename As String = e.File.FileName
|
.Net Visual Basic Code zum Speichern der hochgeladeten Datei als Datensatz in einer SQL Server Tabelle
Und anschliessend wie die Datei mit File.Copy in das Zielverzeichnis kopiert.
#Region "Upload_Videos"
'--------------------------------------------------------< Region : Upload_Bilder >--------------------------------------------------------
Private Sub fl_Video_anfuegen(ByRef e As FileUploadedEventArgs)
'--------------------< fl_Video_anfuegen() >--------------------
Dim sPfad As String
sPfad = Server.MapPath("~/Daten/Videos/")
Dim intSubNr As Integer = 0
Dim objStream As IO.FileStream = e.File.InputStream
Dim sFilename_with_Path As String = objStream.Name
Dim sFilename As String = e.File.FileName
'--< Recordset >--
Dim AdapterVideos As SqlClient.SqlDataAdapter = clsDB.getTableAdapter("SELECT TOP 1 * FROM tblWeb_Videos WHERE IDDetail = " & _IDDetail & " ORDER BY IDVideo DESC")
If AdapterVideos Is Nothing Then
fp_Message_anzeigen("fl_Video_anfuegen", "/Datenquelle defekt")
Exit Sub
End If
Dim cmdInit As New SqlClient.SqlCommandBuilder(AdapterVideos)
Dim dsVideos As New DataSet()
AdapterVideos.Fill(dsVideos) 'lade ds
If Not dsVideos Is Nothing Then
If dsVideos.Tables(0).Rows.Count = 0 Then
intSubNr = 0
Else
intSubNr = clsDB.dbLong(dsVideos.Tables(0).Rows(0)("OrderNr"))
End If
'< erhoehen >
intSubNr += 1
'</ erhoehen >
Dim rowVideo_Neu As DataRow = dsVideos.Tables(0).Rows.Add
rowVideo_Neu("IDDetail") = _IDDetail
rowVideo_Neu("Filename") = sFilename
rowVideo_Neu("OrderNr") = intSubNr
rowVideo_Neu("dtCreated") = Now
AdapterVideos.Update(dsVideos)
End If
'--</ Recordset >--
Dim intTeiler As Integer = _IDDetail / 1000
If Not Directory.Exists(sPfad & intTeiler) Then
Directory.CreateDirectory(sPfad & intTeiler)
End If
If Not Directory.Exists(sPfad & intTeiler & "/Videos_" & _IDDetail) Then
Directory.CreateDirectory(sPfad & intTeiler & "/Videos_" & _IDDetail)
End If
'--< kopieren >--
Try
File.Copy(sFilename_with_Path, sPfad & intTeiler & "\Videos_" & _IDDetail & "\" & sFilename, True)
Catch ex As Exception
fp_Message_anzeigen("kopieren fehlgeschlagen<br>Videoname=" & sFilename & "<br>Path=" & sPfad, "fl_Video_anfuegen()")
Exit Sub
End Try
'--</ kopieren >--
'--------------------</ fl_Video_anfuegen() >--------------------
End Sub
'--------------------------------------------------------</ Region : Upload_Videos >--------------------------------------------------------
#End Region '/Upload_Videos
|
Anzeigen und Laden der Grid-Liste unterhalb eines Upload Controls
#Region "Grid_Videos"
'--------------------------------------------------------< Region : Grid_Videos >--------------------------------------------------------
Private Sub fl_Load_Grid_Videos()
'--------------------< fl_Load_Grid_Videos() >--------------------
'< Daten >
Dim sSQL As String = "SELECT IDVideo,Filename,Text0,OrderNr FROM tblWEB_Videos WHERE IDDetail=" & _IDDetail & " ORDER BY IDVideo"
'------< Grid laden >------
'< Daten laden >
Dim dt As DataTable = clsDB.getDataTable(sSQL)
'</ Daten laden >
'< Kontrolle >
If dt Is Nothing Then
Exit Sub
ElseIf dt.Rows.Count = 0 Then
Exit Sub
End If
'</ Kontrolle >
'</ Daten >
Dim intTeiler As Integer = _IDDetail / 1000
'< Grid_Videos laden >
ctlGrid_Videos.DataSource = dt
If Page.IsPostBack Then
ctlGrid_Videos.Rebind()
End If
'</ Grid_Videos laden >
'------</ Grid laden >------
'--------------------</ fl_Load_Grid_Videos() >--------------------
End Sub
Protected Sub ctlGrid_Videos_BatchEditCommand(sender As Object, e As GridBatchEditingEventArgs) Handles ctlGrid_Videos.BatchEditCommand
'--------------------< ctlGrid_Videos_BatchEditCommand() >--------------------
'--------------------< ctlGrid_Files_BatchEditCommand() >--------------------
'*beim Druecken des Save-Changes befehls im Grid-Header
Dim sPfad As String
sPfad = Server.MapPath("~/Daten/Videos/")
Dim intTeiler As Integer = _IDDetail / 1000
For Each cmd As Telerik.Web.UI.GridBatchEditingCommand In e.Commands
If cmd.Type = GridBatchEditingCommandType.Delete Then
'----< Zeile loeschen >----
Try
'--< Files loeschen >--
Dim sFilename As String = clsDB.dbText(cmd.OldValues("Filename"))
Dim sFilename_withPath As String = sPfad & intTeiler & "\Videos_" & _IDDetail & "\" & sFilename
If File.Exists(sFilename_withPath) Then
File.Delete(sFilename_withPath)
End If
'--</ Files loeschen >--
'--< Datensatz loeschen >--
Dim intIDVideo As Long = clsDB.dbLong(cmd.OldValues("IDVideo"))
Dim sqlDelete As String = "DELETE FROM tblWeb_Videos WHERE IDVideo=" & intIDVideo
clsDB.executeSQL(sqlDelete)
'--</ Datensatz loeschen >--
Catch ex As Exception
fp_Message_anzeigen("Fehler beim File Loeschen<br>" & ex.Message, "ctlGrid_Files_BatchEditCommand()")
End Try
'----</ Zeile loeschen >----
ElseIf cmd.Type = GridBatchEditingCommandType.Update Then
'----< Zeile aendern >----
Try
'--< Bild Info_aendern >--
Dim intIDVideo As Long = clsDB.dbLong(cmd.OldValues("IDVideo"))
Dim AdapterFile As SqlClient.SqlDataAdapter = clsDB.getTableAdapter("SELECT TOP 1 * FROM tblWeb_Videos WHERE IDVideo=" & intIDVideo)
Dim cmdInit As New SqlClient.SqlCommandBuilder(AdapterFile)
Dim dsFile As New DataSet()
AdapterFile.Fill(dsFile) 'lade ds
If Not dsFile Is Nothing Then
Dim rowFile As DataRow = dsFile.Tables(0).Rows(0)
rowFile.BeginEdit()
'rowFile("Title") = cmd.NewValues("Title")
rowFile("Text0") = cmd.NewValues("Text0")
rowFile("dtEdit") = Now
rowFile.EndEdit()
AdapterFile.Update(dsFile)
End If
'--< Bild Info_aendern >--
'--</ Datensatz loeschen >-
Catch ex As Exception
fp_Message_anzeigen("Fehler beim File aendern<br>" & ex.Message, "ctlGrid_Videos_BatchEditCommand()")
End Try
'----</ Zeile aendern >----
End If
Next
'< Grid anzeigen >
fl_Load_Grid_Videos()
'</ Grid anzeigen >
'--------------------</ ctlGrid_Videos_BatchEditCommand() >--------------------
End Sub
'--------------------------------------------------------< Region : Grid_Videos >--------------------------------------------------------
#End Region
|
XAML Strukture der Upload Elemente
<%------< ctlUpload_Videos >------%>
<span style="font:bold;color:blue"><b>Videos</b> hochladen:</span>
<telerik:RadAsyncUpload ID="ctlUpload_Videos" runat="server" Culture="de-DE" DropZones="mov,mp4" MultipleFileSelection="Automatic" Skin="Telerik"
OnFileUploaded="ctlUpload_Videos_FileUploaded">
<FileFilters>
<telerik:FileFilter Description="Videos(mp4,mov)" Extensions="mov,mp4" />
</FileFilters>
</telerik:RadAsyncUpload>
<div class="DropZone_Videos" style="background-color: lightgray;">
<p>Videos hierein ziehen</p>
</div>
<%------< ctlUpload_Bilder >------%>
<%----------< ctlGrid_Videos >----------%>
<telerik:RadGrid ID="ctlGrid_Videos" runat="server" PageSize="20" Skin="Silk"
AutoGenerateColumns="False" Width="100%" AutoGenerateDeleteColumn="True" Culture="de-DE"
OnBatchEditCommand="ctlGrid_Videos_BatchEditCommand" MasterTableView-EditItemStyle-Wrap="true" ClientSettings-Resizing-AllowColumnResize="true" EditItemStyle-Wrap="true" MasterTableView-EditFormSettings-EditColumn-Resizable="true">
<ClientSettings>
<Resizing AllowColumnResize="True" AllowRowResize="false" ResizeGridOnColumnResize="false"
ClipCellContentOnResize="true" EnableRealTimeResize="false" AllowResizeToFit="true" />
</ClientSettings>
<MasterTableView CommandItemDisplay="Top" DataKeyNames="IDVideo" HorizontalAlign="NotSet" EditMode="Batch" AutoGenerateColumns="false" ShowHeader="True">
<BatchEditingSettings EditType="Row" />
<SortExpressions>
<telerik:GridSortExpression FieldName="IDVideo" SortOrder="Ascending" />
</SortExpressions>
<Columns>
<telerik:GridBoundColumn DataField="IDVideo" HeaderStyle-Width="40px" HeaderText="ID" SortExpression="IDVideo" UniqueName="IDVideo" ReadOnly="true">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="OrderNr" HeaderStyle-Width="20px" HeaderText="Nr" SortExpression="OrderNr" UniqueName="OrderNr" ReadOnly="true">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="colFilename" DataField="Filename" ItemStyle-Width="80px" HeaderText="Filename" ReadOnly="true">
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn HeaderText="Description" DataField="Text0" Resizable="True">
<ItemStyle HorizontalAlign="Left" />
<HeaderStyle HorizontalAlign="Left" />
<ItemTemplate>
<%#Eval("Text0")%>
</ItemTemplate>
<EditItemTemplate>
<div style="padding: 5px 0px 5px 0px;">
<telerik:RadTextBox ID="txtText0" runat="server" Skin="Sunset" Text='<%#Bind("Text0")%>' Font-Size="12px" Font-Names="Verdana" AutoPostBack="false" Resize="Both" Wrap="true" TextMode="MultiLine" EnabledStyle-Resize="Both"></telerik:RadTextBox>
</div>
</EditItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
<%----------</ ctlGrid_Files >----------%>
|
Javascript für Upload Control einbauen
Damit Drag und Drop im Browser funktieriert
<telerik:RadscriptBlock runat="server">
<script type="text/javascript">
//<![CDATA[
var $ = $telerik.$;
function pageLoad() {
if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
$(".qsf-demo-canvas").html("<strong>Your browser does not support Drag and Drop. Please take a look at the info box for additional information.</strong>");
}
else {
$(document).bind({ "drop": function (e) { e.preventDefault(); } });
var dropZone1 = $(document).find(".DropZone_Files");
dropZone1.bind({ "dragenter": function (e) { dragEnterHandler(e, dropZone1); } })
.bind({ "dragleave": function (e) { dragLeaveHandler(e, dropZone1); } })
.bind({ "drop": function (e) { dropHandler(e, dropZone1); } });
}
}
function dropHandler(e, dropZone) {
dropZone[0].style.backgroundColor = "#357A2B";
}
function dragEnterHandler(e, dropZone) {
var dt = e.originalEvent.dataTransfer;
var isFile = (dt.types != null && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('application/x-moz-file')));
if (isFile || $telerik.isSafari5 || $telerik.isIE10Mode || $telerik.isOpera)
dropZone[0].style.backgroundColor = "#000000";
}
function dragLeaveHandler(e, dropZone) {
if (!$telerik.isMouseOverElement(dropZone[0], e.originalEvent))
dropZone[0].style.backgroundColor = "#357A2B";
}
//]]>
</script>
</telerik:RadscriptBlock>
|
Voraussetzungen:
Im Header der Datei muss ein Verweis auf Telerik Web.UI stattfinden.
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
|
Für die Interaktivitität des Controls mit Drag und Drop und zum Anzeigen von dynamischen Fehlern und Texten muss zusätzlich das Telerik Control: RadAjaxManager eingebunden werden
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"></telerik:RadAjaxManager>
|
Wie hier in der Beispiel Datei
Für das obere Beispiel liegt eine Tabelle mit Files zugrunde, in welche die Dateien als Recordsets vermerkt werden
