TELERIK的RADASYNCUPLOAD控件学习二

2013-03-05 15:03 y-z-f 阅读(3117) 评论(2) 编辑收藏举报

经过前面的简单的学习，大家基本上都应该会使用了这个文件上传控件了吧。

中间也有一段时间没有发布后篇了，所以今天的量可能会很多，请大家做好心理准备，不要看到中途就关闭浏览器。

一、拖拽式

通过把文件拖拽进我们指定的区域就可以讲文件上传，但是该功能有浏览器限制，而且使用的是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>

到此先告一段落，下面将开始学习如何使用自定义的处理程序去处理上传文件。

会员力量，点亮园子希望

刷新页面返回顶部

专注Xamarin.Android与ASP.NET MVC 组建Xamarin中国社区与培训机构（希望有更多人的帮助）

TELERIK的RADASYNCUPLOAD控件学习二

About