<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ResizedImagesUpload.aspx.cs" Inherits="EAFUpload.ResizedImagesUpload" %>
<!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>
<title>Resize multiple images on the client-side and uploading them to the server.</title>
<link rel="stylesheet" href="style.css" />
<style type="text/css">
#thumbContainer
{
overflow: auto;
width: 305px;
height: 405px;
border: 1px solid #cccccc;
}
.thumbImage
{
border: none;
}
.thumbImageCont
{
width: 120px;
border: none;
margin-left: 3px;
margin-bottom: 3px;
text-align: center;
}
</style>
<script type="text/javascript">
function EAFlashUpload_onMovieLoad(errors)
{
if(errors != "")
alert(errors);
}
function EAFlashUpload_onFileLoadEnd(fileObj)
{
var imageObj;
var uniqueId;
imageObj = EAFlashUpload.urlVarsToObject(fileObj.serverResponse);
uniqueId = (new Date()).getTime();
addImageToContainer(uniqueId, imageObj.thumbUrl);
}
function EAFlashUpload_onSystemError(msg)
{
alert(msg);
}
function EAFlashUpload_onUploadError(errorObj)
{
alert(errorObj.message);
}
// --- Image displaying --- //
function addImageToContainer(thumbId, thumbUrl)
{
var imageContainer = document.getElementById("thumbContainer");
var image = document.getElementById("imageTemplate");
image = image.cloneNode(image);
var divImage = document.getElementById("imageContTemplate");
divImage = divImage.cloneNode(divImage);
image.setAttribute("id", thumbId);
image.setAttribute("src", thumbUrl);
divImage.setAttribute("id", "div" + thumbId);
divImage.appendChild(image);
imageContainer.appendChild(divImage);
divImage.style.display = "inline";
image.style.display = "inline";
}
function clearList()
{
var imageContainer = document.getElementById("thumbContainer");
imageContainer.innerHTML = "";
}
// --- Image displaying --- //
</script>
</head>
<body>
<p>
The EAFlashUpload provides a possibility to resize image on client-side. The component allows to upload as resized images only as resized and original images.
<br />
The following settings are predefined for current example:
<ul>
<li>The size of preview image 160x160(scaling is applied automatically)</li>
<li>The size for image resizing 300x300(scaling is applied automatically)</li>
<li>Resized images are uploaded to the server</li>
</ul>
</p>
<div style="border: 1px solid #000000; padding: 10px;">
<b>Note:</b> Trial version has two limitiations: maximum files count is 10 and size of each file cannot be larger than 50 MB.
</div>
<br /><br />
<table>
<tr>
<td>
<div id="EAFlashUpload_holder">
You need at least Adobe Flash Player 10 for successful work. Download the latest version from here:
<br />
<a href="http://www.adobe.com/support/flashplayer/downloads.html">Adobe Flash Player</a>
</div>
</td>
<td style="padding-left: 40px; vertical-align: top;">
Resized images container:<br />
<div id="thumbContainer"></div>
<a href="javascript:clearList();">Clear list</a>
<!-- image placeholder template -->
<div class="thumbImageCont" style="display:none;" id="imageContTemplate"></div>
<img class="thumbImage" style="display:none;" id="imageTemplate" src="" />
<!-- image placeholder template -->
</td>
</tr>
</table>
<!-- Embedding the EAFlashUpload control -->
<script type="text/javascript" src="EAFUpload/swfobject.js"></script>
<script type="text/javascript">
var params = {
BGcolor: "#ffffff",
wmode: "window"
};
// id and name attribute may contain any value.
// You need to use specified below identifier to access to the EAFlashUpload methods and properties.
var attributes = {
id: "EAFlashUpload",
name: "EAFlashUpload"
};
var flashvars = new Object();
flashvars["uploader.uploadUrl"] = "ResizedImagesUpload.aspx"; //Note: & symbol should be encoded to %26 for query string values. Ex: http://www.somesite.com/uploader.aspx?field1=value1%26field2=value2
flashvars["viewFile"] = "EAFUpload/ImageView.swf";
// Define rules for images upload. Only original images will be uploaded.
flashvars["uploader.uploadResizedImages"] = true;
flashvars["uploader.uploadOriginalImages"] = false;
flashvars["uploader.resizedImageMaxWidth"] = 300;
flashvars["uploader.resizedImageMaxHeight"] = 300;
flashvars["view.imagesList.cellStyle.maxImageWidth"] = 160;
flashvars["view.imagesList.cellStyle.maxImageHeight"] = 160;
flashvars["view.imagesList.rowCount"] = 2;
flashvars["view.imagesList.columnCount"] = 3;
// Disable description label
flashvars["view.imagesList.cellStyle.enableDescription"] = false;
swfobject.embedSWF("EAFUpload/EAFUpload.swf", "EAFlashUpload_holder", "498", "546", "10.0.0", "EAFUpload/expressInstall.swf", flashvars, params, attributes);
// Handles EAFlashUpload's onMovieLoad event and displays existing loading errors.
function EAFlashUpload_onMovieLoad(errors)
{
if(errors != "")
alert(errors);
}
function EAFlashUpload_onImageViewResize(width, height)
{
EAFlashUpload.style.width = width;
EAFlashUpload.style.height = height;
}
</script>
<br />
<hr />
<div style="padding: 10px; font-weight: bold;">
Note: If you have questions regarding this example please let us know <a href="mailto:support%40easyalgo.com?Subject=ResizedImagesUpload">support@easyalgo.com</a>. Any assistance is provided for free.
</div>
<a target="_blank" href="http://www.easyalgo.com/quickstart/util/srcview.aspx?path=/Examples/EAFlashUpload/ResizedImagesUpload.src">View source code</a>
</body>
</html>