How to display a image by fileupload using jquery?

Posted by Hariinakoti under jQuery on 9/28/2012 | Points: 10 | Views : 1995 | Status : [Member] | Replies : 10
Hi All,
in my asp.net web page ,image control and file upload are there.if click file upload and select image file from local disc and it will display that image in asp.net image control without clicking another buttons or refreshing the page.

Thanks & Regards
Hari

Thanks & Regards
Hari



Responses

Posted by: Solijoseph on: 9/28/2012 [Member] Starter | Points: 25

Up
0
Down
<input type="file" id="hmFile" runat="server" />

$("#<%=hmFile.ClientID%>").live("change", function (e) {

var filename = document.getElementById("<%=hmFile.ClientID%>").value;
var exn = "";
var i = filename.lastIndexOf('.');

if (i !== -1) {
exn = filename.slice(i + 1);
}
if (exn !== "") {
if (CheckValidFile(exn)) { //CheckValidFile() function check whether the selected file is valid
//Bind selected image with control from server side
// __doPostBack("", document.getElementById("<%=hidImageID.ClientID%>").value);
// Or use ajax
}
else {
alert("Unable to process this photo. Please check your photo's format and try again.\n We support these photo formats: JPG, JPEG, GIF, PNG, and BMP");

}
}
});

Thanks & Regards
Solimon Joseph

Hariinakoti, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Hariinakoti on: 9/28/2012 [Member] Starter | Points: 25

Up
0
Down
Hi Solimon,
ur code is working upto if(exn!=="") after that it is not working. I got error at CheckValidFile() .What you wrote in that function.Here u r not share.Please send that code.

Thanks & Regards
Hari

Hariinakoti, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Solijoseph on: 9/28/2012 [Member] Starter | Points: 25

Up
0
Down

Function Definition

function CheckValidFile(exn) {
var newext = exn.toLowerCase();
if (newext == "jpg" || newext == "bmp" || newext == "jpeg" || newext == "png" || newext == "gif") {

return true;
}
else {

return false;
}
}

Thanks & Regards
Solimon Joseph

Hariinakoti, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Hariinakoti on: 9/28/2012 [Member] Starter | Points: 25

Up
0
Down
Hi ,
Code is working but i didn't get out put in image control

Thanks & Regards
Hari

Hariinakoti, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Solijoseph on: 9/28/2012 [Member] Starter | Points: 25

Up
0
Down
Hari,

Use
__doPostBack("IMAGE",exn ); // A postback occurs when execute this line

In the Server side

if (IsPostBack)
{
string parameter = Request.Form["__EVENTTARGET"];
string argument = Request.Form["__EVENTARGUMENT"];
if (parameter == "IMAGE")
{
hmFile.PostedFile.SaveAs("../Image/Test."+argument ); //argument contain image extension
imgCtrl1.ImageUrl="../Image/Test."+argument ;
// Alternate Method, Use httphandler and bind ImageStream with image Controller

}

Thanks & Regards
Solimon Joseph

Hariinakoti, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Hariinakoti on: 9/28/2012 [Member] Starter | Points: 25

Up
0
Down
in pageload?

Thanks & Regards
Hari

Hariinakoti, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Solijoseph on: 9/28/2012 [Member] Starter | Points: 25

Up
0
Down
Yes

Thanks & Regards
Solimon Joseph

Hariinakoti, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Hariinakoti on: 9/28/2012 [Member] Starter | Points: 25

Up
0
Down
I want it is in vb.net .this code is not converting to c# to vb

Thanks & Regards
Hari

Hariinakoti, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Solijoseph on: 9/28/2012 [Member] Starter | Points: 25

Up
0
Down
Sorry

Thanks & Regards
Solimon Joseph

Hariinakoti, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Hariinakoti on: 9/28/2012 [Member] Starter | Points: 25

Up
0
Down
Its ok Solijoseph.Thanq for ur answers.

Thanks & Regards
Hari

Hariinakoti, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response