In this article you will know a simple way to view the image as soon as you select it from your hard drive, The uploading of the image is performed by ASP.NET 2.0 Client Callbacks.
Read The Full Tutorial.
In this article you will know a simple way to view the image as soon as you select it from your hard drive, The uploading of the image is performed by ASP.NET 2.0 Client Callbacks.
Here we will select a file:
<input ide="File1" runat="server" onchange="PopulateList(this)" name="File1"
type="File" />
function PopulateList(obj)
{
// Upload the image to the server folder
filePath = obj.value;
// calls the server's method using client callbacks
CallServer(obj.value,'');
}
we are capturing the file path from the file field control into a public variable filePath.
public void RaiseCallbackEvent(string eventArgument)
{
if (!String.IsNullOrEmpty(eventArgument))
{
returnValue = eventArgument;
}
}
The GetCallbackResult method is responsible for uploading the file to the server's folder.
public string GetCallbackResult()
{
string fileName = System.IO.Path.GetFileName(returnValue);
string path = Server.MapPath("Images/");
string fullPath = path + fileName;
Stream s = File.OpenRead(returnValue);
byte[] buffer = new byte[s.Length];
s.Read(buffer, 0, (int) s.Length);
int len = (int) s.Length;
s.Dispose();
s.Close();
FileStream fs = new FileStream(fullPath, FileMode.Create);
fs.Write(buffer, 0, len);
Bitmap bmp = new Bitmap(fs);
if (System.IO.Path.GetExtension(returnValue).Equals(".gif"))
{
bmp.Save(fs, ImageFormat.Gif);
}
else
{
bmp.Save(fs, ImageFormat.Jpeg);
}
bmp.Dispose();
fs.Dispose();
fs.Close();
return "Images/"+ fileName;
}
Here we reading the file into the buffer using the file path as selected by the user:
function ReceiveServerData(rValue)
{
// The new path will contain the path of the image which is inside the
// server's folder
newPath = rValue;
CreateNestedElements();
}
Now we will create nested elements using this code:
function CreateNestedElements()
{
var obj = document.getElementById("fileList");
var divElement = document.createElement('div');
divElement.id = 'div' + counter;
var deleteButton = document.createElement('button');
deleteButton.value = 'Delete';
deleteButton.innerHTML = 'Delete';
deleteButton.onclick = DeleteItem;
var imageObject = document.createElement('img');
imageObject.src = newPath;
var textNode = document.createTextNode(filePath);
divElement.appendChild(textNode);
divElement.appendChild(deleteButton);
divElement.appendChild(imageObject);
document.getElementById("fileList").appendChild(divElement);
counter++;
}
|
Ajax Projects
