經過前面的簡單的學習，大家基本上都應該會使用了這個文件上傳控件了吧。
中間也有一段時間沒有發布后篇了，所以今天的量可能會很多，請大家做好心理准備，不要看到中途就關閉瀏覽器。
一、拖拽式
通過把文件拖拽進我們指定的區域就可以講文件上傳，但是該功能有瀏覽器限制，而且使用的是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 <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>
到此先告一段落，下面將開始學習如何使用自定義的處理程序去處理上傳文件。