<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SimpleImageGallery.aspx.cs" Inherits="EAFUpload.SimpleImageGallery" %>
<!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>Upload multiple image files and create simple image gallery.</title>
<script src="jslibraries/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jslibraries/jquery.lightbox-0.5.min.js" type="text/javascript"></script>
<link media="screen" href="jslibraries/css/jquery.lightbox-0.5.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
<style type="text/css">
#thumbContainer
{
overflow: auto;
width: 180px;
height: 350px;
border: 1px solid #cccccc;
}
.contentContainer
{
margin:10px auto 10px auto;
width: 800px;
}
.thumbImage
{
border: none;
cursor: pointer;
}
.thumbImageCont
{
float: left;
width: 150px;
border: none;
margin-left: 3px;
margin-bottom: 3px;
text-align: center;
}
</style>
<script type="text/javascript">
var isFinalUploadSet = false;
var largeImagesURLs;
function EAFlashUpload_onFileLoadEnd(fileObj) {
if (isFinalUploadSet) {
var response = EAFlashUpload.urlVarsToObject(fileObj.serverResponse);
addImageToContainer(fileObj.id, response.thumbUrl);
}
else {
var response = EAFlashUpload.urlVarsToObject(fileObj.serverResponse);
largeImagesURLs[fileObj.id] = new Object();
largeImagesURLs[fileObj.id].href = response.largeImageUrl;
largeImagesURLs[fileObj.id].title = response.description;
}
}
function EAFlashUpload_onResizedImagesUploadEnd() {
if (!isFinalUploadSet) {
setPropertiesForThumbnails();
EAFlashUpload.setProperty("queue.deleteUploadedFiles", false);
isFinalUploadSet = true;
var files = EAFlashUpload.getFiles();
for (var i in files) {
// set status of each file as READY otherwise uploadFiles() method will not take effect.
EAFlashUpload.setFileStatus(files[i].id, 0);
}
EAFlashUpload.uploadFiles();
}
else {
setPropertiesForResizedImages();
EAFlashUpload.setProperty("queue.deleteUploadedFiles", true);
isFinalUploadSet = false;
$('.thumbImageCont').lightBox({
imageLoading: 'jslibraries/images/lightbox-ico-loading.gif',
imageBtnClose: 'jslibraries/images/lightbox-btn-close.gif',
imageBtnPrev: 'jslibraries/images/lightbox-btn-prev.gif',
imageBtnNext: 'jslibraries/images/lightbox-btn-next.gif',
imageBlank: 'jslibraries/images/lightbox-blank.gif'
});
$('.thumbImageCont').css('display', 'inline');
}
}
function EAFlashUpload_onSystemError(msg) {
setPropertiesForResizedImages();
isFinalUploadSet = false;
}
function EAFlashUpload_onUploadError(errorObj) {
setPropertiesForResizedImages();
isFinalUploadSet = false;
}
// initializes required properties for resized images(size bounds 600) upload
function setPropertiesForResizedImages() {
EAFlashUpload.setProperty("uploader.resizedImageMaxWidth", resizedImgBounds)
EAFlashUpload.setProperty("uploader.resizedImageMaxHeight", resizedImgBounds);
EAFlashUpload.setProperty("view.statusLabelOnProgressOriginalText", "#PERCENTS_DONE#% done (#FILE_INDEX# of #FILES_COUNT# resized images uploaded)\nResized images with size bounds 600x600");
EAFlashUpload.setProperty("uploader.uploadUrl", uploadUrl);
EAFlashUpload.setProperty("uploader.resizedFilenamePattern", "resized_#FILE_NAME#");
EAFlashUpload.setProperty("uploader.fileStatusREADYMsg", "Resized ready");
EAFlashUpload.setProperty("uploader.fileStatusRESIZED_UPLOADINGMsg", "Resized image uploading...");
EAFlashUpload.setProperty("uploader.fileStatusRESIZED_UPLOADEDMsg", "Resized image uploaded");
largeImagesURLs = new Object();
}
// initializes required properties for thumbnails(size bounds 150) upload
function setPropertiesForThumbnails() {
EAFlashUpload.setProperty("uploader.resizedImageMaxWidth", thumbImgBounds)
EAFlashUpload.setProperty("uploader.resizedImageMaxHeight", thumbImgBounds);
EAFlashUpload.setProperty("view.statusLabelOnProgressOriginalText", "#PERCENTS_DONE#% done (#FILE_INDEX# of #FILES_COUNT# thumbnails uploaded)");
EAFlashUpload.setProperty("uploader.uploadUrl", uploadUrl + "?isFinalUploadSet=1");
EAFlashUpload.setProperty("uploader.resizedFilenamePattern", "thumb_#FILE_NAME#");
EAFlashUpload.setProperty("uploader.fileStatusREADYMsg", "Thumbnail ready");
EAFlashUpload.setProperty("uploader.fileStatusRESIZED_UPLOADINGMsg", "Thumbnail uploading...");
EAFlashUpload.setProperty("uploader.fileStatusRESIZED_UPLOADEDMsg", "Thumbnail uploaded");
}
// --- Image displaying --- //
function addImageToContainer(fileId, thumbUrl) {
var image = $('<img></img>').attr({
id: fileId,
src: thumbUrl
})
.css('display', 'inline')
.addClass('thumbImage');
var imageContainer = $('<a></a>').attr({
id: 'cont' + fileId,
href: largeImagesURLs[fileId].href,
title: largeImagesURLs[fileId].title
})
.css('display', 'none')
.addClass('thumbImageCont');
imageContainer.append(image);
$("#thumbContainer").append(imageContainer);
}
function clearList() {
$("#thumbContainer").html('');
}
// --- Image displaying --- //
</script>
</head>
<body style="width:auto;">
<div class="contentContainer">
<p>
This example demonstrates how to upload multiple image files to the server and organize them as simple gallery. Also examples demonstrates how to resize images on the client side.
<a href="http://leandrovieira.com/projects/jquery/lightbox/">jQuery lightBox plugin</a> is used for images displaying.
<br />
The example contains a number of limitiations. Keep in mind that it is limitations of this example, not of EAFlashUpload itself:
<ul>
<li>Only image files are allowed for selection;</li>
<li>Size of each file cannot be greater than 5MB;</li>
<li>For each original image the two version of resized images are uploaded: resized image with size bounds 600; resized image with size bounds 150</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>
</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["viewFile"] = "EAFUpload/TableView.swf";
flashvars["queue.allowedExtensions"] = "Images (*.jpg, *.gif, *.png):*.jpg;*.gif;*.png";
flashvars["queue.fileSizeLimit"] = 5242880; // 5 MB
flashvars["uploader.uploadResizedImages"] = true;
flashvars["uploader.uploadOriginalImages"] = false;
// hide size column and change file name pattern for displaying size
flashvars["queue.fileNamePattern"] = "#FILE_NAME# (#FILE_SIZE#)";
flashvars["view.filesList.sizeColumn.visible"] = false;
flashvars["view.filesList.nameColumn.width"] = 250;
flashvars["view.filesList.statusColumn.width"] = 120;
flashvars["customFileProperties.public"] = "Description:put a description";
flashvars["view.filesList.customColumn.propertyNameDataSource"] = "Description";
flashvars["view.filesList.customColumn.visible"] = true;
swfobject.embedSWF("EAFUpload/EAFUpload.swf", "EAFlashUpload_holder", "500", "350", "10.0.0", "EAFUpload/expressInstall.swf", flashvars, params, attributes);
var uploadUrl = "SimpleImageGallery.aspx"
var resizedImgBounds = 600;
var thumbImgBounds = 150;
function EAFlashUpload_onMovieLoad(errors) {
if (errors != "")
alert(errors);
// initializes required properties for resized images(bounds 600) upload
setPropertiesForResizedImages();
}
</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=SimpleImageGallery">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/SimpleImageGallery.src">View source code</a>
</div>
</body>
</html>