Introduction:
The ASPxUploadControl allows end-users to upload files to the web application's server.
In this demo, the ASPxUploadControl's client and server
functionality are used to upload an image file to the server, create the
image's thumbnail and display the thumbnail image within a specific
placeholder on the web page.
Example:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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 runat="server">
<title>Ajax File Upload</title>
</head>
<style type="text/css">
#mainContainer td.buttonCell {
padding-top: 15px;
}
#mainContainer td.caption {
padding-right: 5px;
padding-top: 4px;
vertical-align: top;
}
#mainContainer td.content {
padding-bottom: 20px;
}
#mainContainer td.imagePreviewCell {
border: solid 2px gray;
width: 110px;
height: 115px;
/*if IE*/
height:expression("110px");
text-align: center;
}
#mainContainer td.note {
text-align: left;
padding-top: 1px;
}
</style>
<script type="text/javascript">
// <![CDATA[
function Uploader_OnUploadStart() {
btnUpload.SetEnabled(false);
}
function Uploader_OnFileUploadComplete(args) {
var imgSrc = aspxPreviewImgSrc;
if (args.isValid) {
var date = new Date();
imgSrc = "UploadImages/" + args.callbackData + "?dx=" + date.getTime();
}
getPreviewImageElement().src = imgSrc;
}
function Uploader_OnFilesUploadComplete(args) {
UpdateUploadButton();
}
function UpdateUploadButton() {
btnUpload.SetEnabled(uploader.GetText(0) != "");
}
function getPreviewImageElement() {
return document.getElementById("previewImage");
}
// ]]>
</script>
<body>
<form id="form1" runat="server">
<div>
<table id="mainContainer">
<tr>
<td class="content">
<table>
<tr>
<td style="padding-right: 20px; vertical-align: top;">
<table>
<tr>
<td class="caption">
<asp:Label ID="lblSelectImage" runat="server" Text="Select Image:">
</asp:Label>
</td>
<td>
<dx:ASPxUploadControl ID="uplImage" runat="server" ClientInstanceName="uploader" ShowProgressPanel="True"
NullText="Click here to browse files..." Size="35" OnFileUploadComplete="uplImage_FileUploadComplete">
<ClientSideEvents FileUploadComplete="function(s, e) { Uploader_OnFileUploadComplete(e); }"
FilesUploadComplete="function(s, e) { Uploader_OnFilesUploadComplete(e); }"
FileUploadStart="function(s, e) { Uploader_OnUploadStart(); }"
TextChanged="function(s, e) { UpdateUploadButton(); }"></ClientSideEvents>
<ValidationSettings MaxFileSize="4194304" AllowedFileExtensions=".jpg,.jpeg,.jpe,.gif">
</ValidationSettings>
</dx:ASPxUploadControl>
</td>
</tr>
<tr>
<td>
</td>
<td class="note">
<asp:Label ID="lblAllowebMimeType" runat="server" Text="Allowed image types: jpeg, gif"
Font-Size="8pt">
</asp:Label>
<br />
<asp:Label ID="lblMaxFileSize" runat="server" Text="Maximum file size: 4Mb" Font-Size="8pt">
</asp:Label>
</td>
</tr>
<tr>
<td colspan="2" class="buttonCell">
<asp:Button ID="btnUpload" runat="server" AutoPostBack="False" Text="Upload" ClientInstanceName="btnUpload"
Width="100px" ClientEnabled="False" style="margin: 0 auto;">
<ClientSideEvents Click="function(s, e) { uploader.Upload(); }" />
</asp:Button>
</td>
</tr>
</table>
</td>
<td class="imagePreviewCell">
<img src="../Content/ImagePreview.gif" id="previewImage" alt="" /></td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
// <![CDATA[
var aspxPreviewImgSrc = getPreviewImageElement().src;
// ]]>
</script>
</div>
</form>
</body>
</html>
CS:
using System;
using DevExpress.Web.ASPxUploadControl;
using System.Web.UI;
using System.IO;
using DevExpress.Web.Demos;
using System.Drawing;
public partial class UploadControl_Example : Page {
const string UploadDirectory = "~/UploadControl/UploadImages/";
const string ThumbnailFileName = "ThumbnailImage.jpg";
protected void uplImage_FileUploadComplete(object sender, FileUploadCompleteEventArgs e) {
e.CallbackData = SavePostedFile(e.UploadedFile);
}
string SavePostedFile(UploadedFile uploadedFile) {
if(!uploadedFile.IsValid)
return string.Empty;
string fileName = Path.Combine(MapPath(UploadDirectory), ThumbnailFileName);
using(Image original = Image.FromStream(uploadedFile.FileContent))
using(Image thumbnail = PhotoUtils.Inscribe(original, 100)) {
PhotoUtils.SaveToJpeg(thumbnail, fileName);
}
return ThumbnailFileName;
}
}
0 comments :
Post a Comment