TELERIK的RADASYNCUPLOAD控件学习二

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

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

一、拖拽式

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

下图为效果图:

TELERIK的RADASYNCUPLOAD控件学习二_第1张图片

 

二、禁用插件

 该属性为: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 属性的值将会显示到文件选择对话框中如:

TELERIK的RADASYNCUPLOAD控件学习二_第2张图片

而 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 

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

你可能感兴趣的:(TELERIK的RADASYNCUPLOAD控件学习二)