经过前面的简单的学习，大家基本上都应该会使用了这个文件上传控件了吧。
中间也有一段时间没有发布后篇了，所以今天的量可能会很多，请大家做好心理准备，不要看到中途就关闭浏览器。
一、拖拽式
通过把文件拖拽进我们指定的区域就可以讲文件上传，但是该功能有浏览器限制，而且使用的是HTML5的功能。
首先介绍唯一需要使用的属性:
DropZones
我们只需要将指定的区域使用css选择器写到该属性的值中，这里需要主要的是不是写ID的值而是通过css选择器。
下面为一个实例:
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebTestValidate.RadAsyncUpload.WebForm2" %> 2 3 DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 8 <title>支持拖拽上传文件title> 9 head> 10 <body> 11 <form id="form1" runat="server"> 12 <div> 13 <telerik:RadScriptManager ID="RadScriptManager1" runat="server">telerik:RadScriptManager> 14 <telerik:RadAsyncUpload ID="RadAsyncUpload1" DropZones="#dropzones" runat="server">telerik:RadAsyncUpload> 15 <telerik:RadButton ID="RadButton1" runat="server" Text="RadButton">telerik:RadButton> 16 div> 17 <div style="width:100px;height:100px;background-color:blue;" id="dropzones"> 18 19 div> 20 form> 21 body> 22 html>
其中 DropZones 属性的值为"#dropzones" 从CSS选择是来看就是选择了ID为dropzones的对象。
下图为效果图:
二、禁用插件
该属性为:DisablePlugins
如果我们设置该属性为 true 那么控件将不会使用flash和Silverlight而是转为使用FileApi(如果浏览器支持)否则就使用Iframe模块。
实例:
1 <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" DisablePlugins="true">telerik:RadAsyncUpload>
三、文件格式过滤
实现该功能有两种方法:
1.使用AllowedFileExtensions 属性，如:
1 <telerik:RadAsyncUpload ID="RadAsyncUpload1" TargetFolder="~/uploaded" AllowedFileExtensions="jpeg,png,gif,jpg" runat="server" OnFileUploaded="RadAsyncUpload1_FileUploaded">telerik:RadAsyncUpload>
2.使用FileFilter标签，如:
1 <telerik:RadAsyncUpload ID="RadAsyncUpload1" TargetFolder="~/uploaded" runat="server" OnFileUploaded="RadAsyncUpload1_FileUploaded"> 2 <FileFilters> 3 <telerik:FileFilter Description="Images(jpeg,jpg,gif,png)" Extensions="jpeg,jpg,gif,png" /> 4 FileFilters> 5 telerik:RadAsyncUpload>
其中的 Description 属性的值将会显示到文件选择对话框中如:
而 Extensions 则是真正的文件格式过滤。
四、最大文件尺寸，最大文件数，多选。
设置文件的最尺寸的属性为:MaxFileSize (单位为字节)
设置一次性上传的文件数量的属性为:MaxFileInputsCount
是否可以一次性多选的属性为:MultipleFileSelection (将其的值设置为"Automatic"即可)
五、客户端控制控件
以下为页面内容:
1 <form id="form1" runat="server"> 2 <div> 3 <telerik:RadScriptManager ID="RadScriptManager1" runat="server">telerik:RadScriptManager> 4 <telerik:RadAsyncUpload ID="RadAsyncUpload1" MultipleFileSelection="Automatic" TargetFolder="~/uploaded" AllowedFileExtensions="jpeg,png,gif,jpg" runat="server" MaxFileInputsCount="2" MaxFileSize="5120" OnFileUploaded="RadAsyncUpload1_FileUploaded"> 5 <FileFilters> 6 <telerik:FileFilter Description="Images(jpeg,jpg,gif,png)" Extensions="jpeg,jpg,gif,png" /> 7 FileFilters> 8 telerik:RadAsyncUpload> 9 div> 10 <div> 11 <table> 12 <tr><td> 13 <telerik:RadButton ID="RadButton2" runat="server" Text="Add File Input" OnClientClicked="addFileInput" UseSubmitBehavior="False" AutoPostBack="False">telerik:RadButton> 14 td>tr> 15 <tr><td> 16 <telerik:RadButton ID="RadButton3" runat="server" Text="Delete First Input" OnClientClicked="deleteFirstInputs" UseSubmitBehavior="False" AutoPostBack="False">telerik:RadButton> 17 td>tr> 18 <tr><td> 19 <telerik:RadButton ID="RadButton4" runat="server" Text="Clear All Input" OnClientClicked="clear" UseSubmitBehavior="False" AutoPostBack="False">telerik:RadButton> 20 td>tr> 21 <tr><td> 22 <telerik:RadButton ID="RadButton5" runat="server" Text="Get File Input Count" OnClientClicked="getUploadFiles" UseSubmitBehavior="False" AutoPostBack="False">telerik:RadButton> 23 td>tr> 24 <tr><td> 25 <div id="log"> 26 27 div> 28 td>tr> 29 <tr><td> 30 <telerik:RadButton ID="RadButton6" runat="server" Text="Get Max File Count" OnClientClicked="getCount" UseSubmitBehavior="False" AutoPostBack="False">telerik:RadButton> 31 td>tr> 32 <tr><td> 33 <telerik:RadButton ID="RadButton7" runat="server" Text="Get Init File Count" OnClientClicked="getInitCount" UseSubmitBehavior="False" AutoPostBack="False">telerik:RadButton> 34 td>tr> 35 <tr><td> 36 <telerik:RadButton ID="RadButton8" runat="server" Text="Get Extension" OnClientClicked="getExtension" UseSubmitBehavior="False" AutoPostBack="False">telerik:RadButton> 37 td>tr> 38 table> 39 div> 40 form>
以下为javascript内容（已包含注释）:
1
六、客户端的事件
以下将使用一个javascript文件介绍 其中包含的事件的函数已经方法等等
1
到此先告一段落，下面将开始学习如何使用自定义的处理程序去处理上传文件。