In asp.net there is not control to select multiple files and upload them once with progress bar, so we will use a small third party DLL to achieve this functionality. We will use Flajaxian FileUploader, you can download it from http://www.flajaxian.com
We will create three different images of size 100X100, 400X400 and original file, you can say thumbnail, medium size image and original image.
After downloading it extract the file and reference com.flajaxian.FileUploader.dll
in your application.
Register it on your page or in web.config file
// On Page
<%@ Register TagPrefix="fjx" Namespace="com.flajaxian"
Assembly="com.flajaxian.FileUploader" %>
// In web.config file
<add tagPrefix="fjx" namespace="com.flajaxian"
assembly="com.flajaxian.FileUploader" />
We set all the required things and time to use this control on page, so add following to the page
<fjx:FileUploader ID="FileUploader1" runat="server"
TransparentBackground="true"
UseInsideUpdatePanel="true"
AllowedFileTypes="Web Images :*.jpg;*.jpeg;*.png;*.gif"
OnFileReceived="Uploaded_FileReceived"
MaxFileSize="15MB"
MaxFileSizeReachedMessage="Sorry, file size is greater than 15 MB!">
</fjx:FileUploader>
As you can see here we are using different properties like
UseInsideUpdatePanel: if you want to use inside update panel then true otherwise false or omit it.
AllowedFileTypes: we can define the file types which we can accept
OnFileReceived: define a code behind method to track the uploaded file and then make entries into database, I am using then because I am saving all the files into folder then maintaining the path into a table (we will see this method latter)
Rest are self explanatory, so time to write code behind method to save the file path in database.
protected void Uploaded_FileReceived(object sender,
com.flajaxian.FileReceivedEventArgs e)
{
String ThumbPath = String.Empty;
String MediumPath = String.Empty;
String OriginalPath = String.Empty;
// Create a file name from date time
String FileName = String.Format("{0:yyyy}{0:MM}{0:dd}{0:HH}{0:mm}{0:ss}{0:fff}", DateTime.Now);
using (System.Drawing.Image Img = System.Drawing.Image.FromStream(e.File.InputStream))
{
// Get file extension
String fileExt = System.IO.Path.GetExtension(e.File.FileName).ToLower();
ThumbPath = String.Format("Images/{0}_thumb/{1}", FileName, fileExt);
MediumPath = String.Format("Images/{0}_medium/{1}", FileName, fileExt);
OriginalPath = String.Format("Images/{0}_original/{1}", FileName, fileExt);
// Get thumb resolution
Size ThumbNailSize100 = NewImageSize(Img.Height, Img.Width, 100, 100);
using (System.Drawing.Image ImgThnail = new Bitmap(Img, ThumbNailSize100.Width, ThumbNailSize100.Height))
{
ImgThnail.Save(ThumbPath, Img.RawFormat);
}
Size ThumbNailSize400 = NewImageSize(Img.Height, Img.Width, 400, 400);
using (System.Drawing.Image ImgThnail = new Bitmap(Img, ThumbNailSize400.Width, ThumbNailSize400.Height))
{
ImgThnail.Save(MediumPath, Img.RawFormat);
}
// Save original image, no need to calculate the size
Img.Save(OriginalPath, Img.RawFormat);
}
// TODO:: Create method to save the records into database and call it here
//SaveToDatabase(ThumbPath, MediumPath, OriginalPath);
Method to calculate the width and height of image for 100X100 and 400X400
#region[Resize the image]
public Size NewImageSize(int OriginalHeight, int OriginalWidth,
double thumbWidth, double thumbHeight)
{
Size NewSize;
double tempval;
if (OriginalHeight > thumbHeight || OriginalWidth > thumbWidth)
{
if (OriginalHeight > OriginalWidth)
tempval = thumbHeight / Convert.ToDouble(OriginalHeight);
else
tempval = thumbWidth / Convert.ToDouble(OriginalWidth);
NewSize = new Size(Convert.ToInt32(tempval * OriginalWidth),
Convert.ToInt32(tempval * OriginalHeight));
}
else
NewSize = new Size(OriginalWidth, OriginalHeight); return NewSize;
}
#endregion
Once you will download the DLL, it will have CSS as well so use them
Output:
![]() |
Process manager with a reputed organization, Fond of learning new features and technology related to C#, ASP.Net, SQL Server, MVC etc.I like to help others, if I can
|
By Hamden On 12 Jul, 12 Viewed: 6,567 |
In many cases we need to use read only text box so user cannot edit the value but readonly textbox will lost its value after postback. Let’s say you have a read only text box to set date by using ajax calendar so after post back date will be lost, other case might be you are setting some value in... By Ali Adravi On 24 Apr 2013 Viewed: 4,302
There are ways to call a web service method JavaScript, for more detail you can see [how to retrieve data from database using JavaScript in asp.net][1], but is there any way to call a normal method from JavaScript? And the answer is No; show how we can call a code behind method from JavaScript,... By Jonathan King On 08 Apr 2013 Viewed: 12,506
Most of the times we need to use GridView control to show tabular data in our asp.net application. We simply write procedure to search the records and bind them with GridView and show 10 to 20 records per page. Have you ever thought that why you are fetching all the records and show only 10 to 20... By Ali Adravi On 16 Feb 2013 Viewed: 8,569
A nice feature with ASP.Net is the model binding, it reduced our code and effort to bind our well know controls like GridView, DataList, Repeater etc. So let’s see how we can bind our old controls in new and easy way. Let’s see how we bind the our grid before 4.5 1. We write the code to get... By Mike .Net On 17 Jan 2013 Viewed: 3,217
I was searching for select/deselect all checkboxes code into a gridview. I found most of them only provide to select and deselet all the checkboxes if any of the checkbox is unselected into grid the main checkbox is not affecting. I further try to search some useful code but could not found any... By Ali Adravi On 10 Jul 2012 Viewed: 5,451