经过前面的简单的学习，大家基本上都应该会使用了这个文件上传控件了吧。
中间也有一段时间没有发布后篇了，所以今天的量可能会很多，请大家做好心理准备，不要看到中途就关闭浏览器。
一、拖拽式
通过把文件拖拽进我们指定的区域就可以讲文件上传，但是该功能有浏览器限制，而且使用的是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="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 <script type="text/javascript"> 2 function addFileInput() { 3 //增加一个文件上传控件 4 $find("<%= RadAsyncUpload1.ClientID%>").addFileInput(); 5 } 6 function deleteFirstInputs() { 7 var fileup = $find("<%= RadAsyncUpload1.ClientID%>"); 8 //获得所有的已经上传的文件 9 var count = fileup.getUploadedFiles(); 10 if (count.length > 0) { 11 //删除第一个文件 12 fileup.deleteFileInputAt(0); 13 } 14 } 15 function clear() { 16 //清空已经上传的文件 17 $find("<%= RadAsyncUpload1.ClientID%>").deleteAllFileInputs(); 18 } 19 function getUploadFiles() { 20 var log = document.getElementById('log'); 21 var inputs = $find("<%= RadAsyncUpload1.ClientID%>").getUploadedFiles(); 22 //循环遍历输出已经上传的文件名 23 for (var i = inputs.length - 1 ; i >= 0 ; i--) { 24 log.innerHTML += inputs[i] + '</ br>'; 25 } 26 } 27 function getCount() { 28 //获得可以上传的最大文件数量 29 alert($find("<%= RadAsyncUpload1.ClientID%>").get_maxFileCount()); 30 } 31 function getInitCount() { 32 //获得初始化显示的上传文件控件数量 33 alert($find("<%= RadAsyncUpload1.ClientID%>").get_initialFileInputsCount()); 34 } 35 function getExtension() { 36 //获得文件格式过滤字符串 37 alert($find("<%= RadAsyncUpload1.ClientID%>").get_allowedFileExtensions()); 38 } 39 </script>
六、客户端的事件
以下将使用一个javascript文件介绍 其中包含的事件的函数已经方法等等
1 <script type="text/javascript"> 2 function addRow() { 3 $find("<%= RadAsyncUpload1.ClientID%>").addFileInput(); 4 } 5 //当增减一个控件后响应 6 function onAdded(sender, args) { 7 //args.get_row(); 获得增加的控件DOM对象 8 //args.get_index(); 获得增加的控件的索引 9 } 10 //当文件被拖拽进指定位置后响应 11 //对应 OnClientFileDropped 事件 12 function onFileDropped(sender, args) { 13 //args.get_originalDropEvent(); 获得触发该函数的事件 14 //args.get_file(); 获得文件对象当文件被拖拽进去以及上传 15 //args.get_row(); 获得增加的项的索引 16 } 17 //当用户选择一个文件后响应 18 //对应 OnClientFileSelected 事件 19 function onFileSelected(sender, args) { 20 //args.get_fileInputField(); 获得备选的文件上传控件的对象（IFrame下有用） 21 //args.get_row(); 获得被选的文件上传控件的对象 22 //args.get_rowIndex(); 获得被选的文件上传控件的索引 23 //args.get_fileName(); 获得被选的文件名 24 } 25 //当用户上传多个文件后响应 26 //对应 OnClientFilesSelected 事件 27 function onFilesSelected(sender, args) { 28 //args.get_count(); 获得上传的文件数量 29 //args.set_cancel(true); 取消上传操作 30 //args.get_cancel(); 获得当前是否取消上传操作 31 } 32 //当文件正在上传时响应 即使是多个文件也会逐一调用该函数 33 //对应 OnClientFileUploading 事件 34 function onFileUploading(sender, args) { 35 //args.get_row(); 获得文件上传控件的dom对象 36 //args.set_cancel(); 取消文件的上传 37 //args.get_fileName(); 获得正在上传的文件名 38 } 39 //当文件已经上传后响应 40 //对应 OnClientFileUploaded 事件 41 function onFileUploaded(sender, args) { 42 //args.get_fileName(); 获得文件名称 43 //args.get_row(); 获得导致该事件的DOM对象 44 //args.get_fileInfo(); 获得文件信息对象 45 } 46 //当多个文件已经自动上传后响应 47 //对应 OnClientFilesUploaded 事件 48 function onFilesUploaded(sender) { 49 } 50 //当有文件无法通过验证则响应 每个错误的文件逐一响应 51 //对应 OnClientValidationFaild 52 function onValidationFaild(sender, args) { 53 alert(args.get_fileName()); 54 } 55 //当文件上传时候后响应 56 //对应 OnClientFileUploadFailed 事件 57 function onFileUploadFailed(sender, args) { 58 //args.set_handled(); 阻止错误信息的抛出 59 //args.get_handled(); 获得错误信息是否被阻止 60 //args.get_message(); 返回原始错误信息 61 //args.get_loadedModuleName(); 获得当前加载的模块 flash/silverlight/iframe 62 } 63 //当一个文件项正在被移除时响应 64 //对应 OnClientFileUploadRemoving 事件 65 function onFileUploadRemoving(sender, args) { 66 //args.get_row(); 获得正在被移除的DOM对象 67 //args.get_rowIndex(); 获得正在被移除的对象索引 68 //args.get_fileName(); 获得正在被移除的文件名 69 //args.get_cancel(); 获得当前的移除操作是否被调用 70 //args.set_cancel(); 设置当前的移除操作是否有效 71 } 72 //当一个文件项已经被移除后响应 73 //对应 OnClientFileUploadRemoved 事件 74 function onFileUploadRemoved(sender, args) { 75 //args.get_fileName(); 获得已经被移除的文件名 76 } 77 //当一个文件正在传输时响应 78 //对应 OnClientProgressUploading 事件 79 function onProgressUploading(sender, args) { 80 //args.get_data(); 获得关于文件上传的参数 81 //args.get_data().percent; 文件已完成上传的百分比 82 //args.get_data().fileSize; 文件的总大小 83 //args.get_data().fileName; 文件名 84 //args.get_data().uploadbytes; 已经上传的大小 85 } 86 </script>
到此先告一段落，下面将开始学习如何使用自定义的处理程序去处理上传文件。