It is not working when the Silverlight not installed, only install Flash, it doesn't allow to select multiple files. but when installed Silverlight it allow to select multiple files but cause other issue as error message below:
"Microsoft JScript runtime error: Error while uploading, [HtmlPage_NotEnabled]
Arguments:
Debugging resource strings are unavailable. Often the key and arguments provide sufficient information to diagnose the problem. See
http://go.microsoft.com/fwlink/?linkid=106663&Version=8.1.10411.0&File=System.Windows.Browser.dll&Key=HtmlPage_NotEnabled"
<%
@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<%
@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head id="Head1" runat="server">
<title></title>
<style type="text/css">
/* Hide the fakeInput control */
.ruUploadProgress, li .ruCancel, li .ruRemove
{
visibility: visible;
}
li.ruUploading
{
height: 1px;
}
.RadUpload .ruFakeInput
{
display: none;
}
.ruUploadProgress, li .ruCancel, li .ruRemove
{
/*visibility: hidden;*/
}
li.ruUploading
{
height: 0px;
display: none;
}
.uloadImg
{
height: 400px;
width: 650px;
overflow-y: scroll;
border: 1px solid #CCCCCC;
}
.thumbNails
{
}
.thumbNails li
{
float: left;
list-style-type: none;
margin: 5px;
}
.submit
{
}
.myTest
{
}
.myTest li
{
padding: 0px 5px;
list-style-type: none;
float: left;
}
</style>
<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
</
head>
<
body>
<form id="form1" runat="server">
<%
--<asp:ScriptManager ID="ScriptManager1" runat="server" />--%>
<script type="text/javascript">
Telerik.Web.UI.RadAsyncUpload.Modules.Flash.isAvailable =
function ()
{
return false; };
</script>
<telerik:RadScriptManager runat="server">
</telerik:RadScriptManager>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
//<![CDATA[
var isDuplicateFile = false;
var $ = $telerik.$;
$().ready(
function () {
if (document.getElementById("imgContainer") == null)
$(
'#RadAsyncUpload1').append($telerik.$('<div id="imgContainer" class="uloadImg">').append('<ul class="myTest">'));
});
function fileUploaded(sender, args) {
debugger;
//Truncate the name
if (isDuplicateFile == false) {
truncateName(args);
//Display the picture
// var $row = $telerik.$(args.get_row());
// var id = args.get_fileInfo().TempFileLocation;
// $row.append($telerik.$("</br><img width='180px' />")
// .attr("src", getImageUrl(id)));
// var $row = $telerik.$(args.get_row());
var id = args.get_fileInfo().TempFileLocation;
// var $thumbContainer = $('thumbNails');
// var $imgThumb = $telerik.$("<img width='180px' />").attr("src", getImageUrl(id));
// $('.thumbNails').append($telerik.$("<li>").append($telerik.$("<img width='180px' />").attr("src", getImageUrl(id))));
//var $myClass = $('myTestClass');
var $img = $telerik.$("<img height='120px' />").attr("src", getImageUrl(id));
var $row = $telerik.$(args.get_row());
$telerik.$($row).removeClass(
"ruUploading");
var id = args.get_fileInfo().TempFileLocation;
// if (document.getElementById("myTest") == null)
// $('#imgContainer').append($telerik.$('<ul id="myTest" >').append($row));
// else
// $('#myTest').append($row);
$row.find(
'.ruFileWrap').before($img).before("<br />");
$(
'#imgContainer > ul').append($row);
}
//$('#RadAsyncUpload1').append($telerik.$("<ul>").append($row));
// $('myClass').append($ul);
// $('#myInput').append($telerik.$("<li>").append($telerik.$("<img width='180px' />").attr("src", getImageUrl(id))));
// $('#myInput').append($row);
}
function truncateName(args) {
var $span = $telerik.$(".ruUploadProgress", args.get_row());
var text = $span.text();
if (text.length > 16) {
var newString = text.substring(0, 16) + '...';
$span.text(newString);
}
}
function FileSelected(sender, args) { //Single file
debugger;
// var $row = $telerik.$(args.get_row());
// $row.addClass("ruUploading");
// var id = args.get_fileInfo().TempFileLocation;
// var $thumbContainer = $('#thumbNails');
// $thumbContainer.append($telerik.$("</br><img width='180px' />")
// .attr("src", getImageUrl(id)));
// for (var fileindex in sender._uploadedFiles) {
// if (sender._uploadedFiles[fileindex].fileInfo.FileName == args.get_fileName()) {
// isDuplicateFile = true;
// }
// }
$telerik.$(args.get_row()).addClass(
"ruUploading");
isDuplicateFile =
false;
for (var fileindex in sender._uploadedFiles) {
//if (sender._uploadedFiles[fileindex].fileInfo.FileName == args.get_fileName()) {
if (sender._uploadedFiles[fileindex].fileInfo.FileName == args.get_row().innerText) {
isDuplicateFile =
true;
}
}
}
function getImageUrl(id) {
var url = window.location.href;
var handler = "StreamImage.ashx?TempFileLocation=" + id;
var index = url.lastIndexOf("/");
var completeUrl = url.substring(0, index + 1) + handler;
return completeUrl
}
function onClientFilesUploaded(sender, args) {
//var $btnSubmit = $("<%=btnSubmit.ClientID %>");
var filesCount = sender.getUploadedFiles().length;
if (filesCount > 0) {
$(
'#btnSubmit').show();
$(
'#btnCancel').show();
}
}
function DeleteFiles() {
var upload = $find("<%=RadAsyncUpload1.ClientID %>");
var inputFiles = upload.getUploadedFiles();
for (i = 0; i < inputFiles.length; i++)
upload.deleteFileInputAt(i);
//inputFiles.deleteAllFileInputs();
upload.updateClientState();
}
function FilesSelected(sender, args) { // Multiple Files
debugger;
}
function FileUploadRemoved(sender, args) {
debugger;
if (sender._uploadedFiles.length == 0) {
$(
'#btnSubmit').hide();
$(
'#btnCancel').hide();
}
}
//]]
</script>
</telerik:RadCodeBlock>
<div>
<telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" HttpHandlerUrl="~/CustomHandler.ashx"
TemporaryFolder="TemporaryFolder" OnClientFileSelected="FileSelected" OnClientFilesUploaded="onClientFilesUploaded"
OnClientFileUploadRemoved="FileUploadRemoved" OnClientFilesSelected="FilesSelected"
UploadedFilesRendering="BelowFileInput" OnClientFileUploaded="fileUploaded" MultipleFileSelection="Automatic"
AllowedFileExtensions="jpeg,jpg,gif,png,bmp" Skin="Sunset">
</telerik:RadAsyncUpload>
<telerik:RadProgressArea runat="server" ID="RadProgressArea1">
</telerik:RadProgressArea>
<ul id="myInput" class="ruInputs">
</ul>
<br />
<asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClick="btnSubmit_Click"
Style="display: none" />
<asp:Button ID="btnCancel" runat="server" OnClientClick="DeleteFiles()" Text="Cancel"
OnClick="btnCancel_Click" Style="display: none" />
</div>
</form>
</
body>
</
html>