Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
Hi friends,
I have form in which i am uploading a image and want to show that at the same place. and in a fixed sized box.
 
Like any online form we fill for job or any matrimonial sites.
 
if any of you have any idea then please let me know, its urgent.
 
this is my form (if possible in any of the above language).
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
 
<body>
<form id="registration" name="registration" action="" method="post">
<table width="940" bgcolor="#f1f1f1"  cellspacing="0" cellpadding="8" align="left" style="background:url(mmjs-image/form-bg1.jpg) no-repeat; margin-left:10px;" >
<tr>
<td>
 
<table width="600" bgcolor="#FFFFFF" cellspacing="0" cellpadding="8" style="border:solid #6f0d00 1px; margin-top:10px;" align="left" >
<tr>
<td colspan="2" bgcolor="#6f0d00" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; color:#ffffff; padding:10px 10px 10px 0px; text-align:center;">Free Registration Form<br />This Form will be filled by Parents only</td>
</tr>
<tr>
<td width="300">No.:</td>
<td width="300"><input id="No" name="No" type="text"  style="width:150px; "/></td>
</tr>
 

<tr bgcolor="#FFFFFF" style="text-align:left">
<td>Date:</td>
<td><input id="Date" name="Date" type="text" style="width:150px; "  /></td>
</tr>
 
<tr bgcolor="#FFFFFF" style="text-align:left">
<td>Upload Photo of Candidate:</td>
<td><input name="candidate-photo" id="candidate-photo" size="15"  type="file" style="width:50px;"/>
<input align="right" name="upload_candidate" id="upload_candidate" type="button" value="Upload" style=" float: right; margin-right:140px;"/></td>
</tr>
 
<tr bgcolor="#FFFFFF" style="text-align:left">
<td>&nbsp;</td>
<td><img src="mmjs-image/photo-1.jpg" /></td>
</tr>
 
<tr bgcolor="#FFFFFF" style="text-align:left">
<td>Name of Candidate:</td>
<td><input id="Date" name="Date" type="text" style="width:150px; "  /></td>
</tr>
 
<tr bgcolor="#FFFFFF" style="text-align:left">
<td>Qualification:</td>
<td><input id="Date" name="Date" type="text" style="width:150px; "  /></td>
</tr>
 
<tr bgcolor="#FFFFFF" style="text-align:left">
<td>Education:</td>
<td><input id="Date" name="Date" type="text" style="width:150px; "  /></td>
</tr>
 
<tr bgcolor="#FFFFFF" style="text-align:left">
<td>Job:</td>
<td><input id="Date" name="Date" type="text" style="width:150px; "  /></td>
</tr>
 
<tr bgcolor="#FFFFFF" style="text-align:left">
<td>Date of Birth:</td>
<td><input id="Date" name="Date" type="text" style="width:150px; "  /></td>
</tr>
 
<tr bgcolor="#FFFFFF" style="text-align:left">
<td>Time:</td>
<td><input id="Date" name="Date" type="text" style="width:150px; "  /></td>
</tr>
 
<tr bgcolor="#FFFFFF" style="text-align:left">
<td>Place:</td>
<td><input id="Date" name="Date" type="text" style="width:150px; "  /></td>
</tr>
 
<tr bgcolor="#FFFFFF" style="text-align:left">
<td>Upload Photo of Father:</td>
<td><input name="candidate-father" id="candidate-father"  size="15" type="file" style="width:90px;"/>
<input align="right" name="upload_father" id="upload_father" type="button" value="Upload" style=" float: right; margin-right:140px;"/></td>
</tr>
<tr bgcolor="#FFFFFF" style="text-align:left">
<td>&nbsp;</td>
<td><img src="mmjs-image/father-photo.jpg" width="98" height="121" border="0" /></td>
</tr>
 
<tr bgcolor="#FFFFFF" style="text-align:left">
<td>Upload Family Group photo</td>
<td><input name="candidate-family" id="candidate-family"  size="15" type="file" style="width:90px;"/>
<input align="right" name="upload_family" id="upload_family" type="button" value="Upload" style=" float: right; margin-right:140px;"/></td>
</tr>
 
<tr bgcolor="#FFFFFF" style="text-align:left">
<td>&nbsp;</td>
<td><img src="mmjs-image/family-photo.jpg" width="401" height="226" border="0" /></td>
</tr>
 

 

 
<tr bgcolor="#FFFFFF" style="text-align:left">
<td>Upload Photo of Monther:</td>
<td><input name="candidate-mother" id="candidate-mother" size="15"  type="file" style="width:90px;"/>
<input align="right" name="upload_mother" id="upload_mother" type="button" value="Upload" style=" float: right; margin-right:140px;"/></td>
</tr>
 
<tr bgcolor="#FFFFFF" style="text-align:left">
<td>&nbsp;</td>
<td><img src="mmjs-image/photo-monther.jpg" width="99" height="120" border="0" /></td>
</tr>
 

 
</table>
 
</td>
</tr>
</table>
</form>
</body>
</html>
 

 

Thanks
Posted 25-Sep-12 19:48pm
Edited 25-Sep-12 21:22pm
v2
Comments
Mohibur Rashid at 26-Sep-12 1:12am
   
You have three problem here. Try to sort out one by one
1. Upload image
2. resize the image
3. Showing the image(This is the simplest one)
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

By show on the same page, do you mean without refreshing the page? If so AJAX is the way to go. Look up file uploading in AJAX and refreshing a portion of a webpage using AJAX.
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

var $ = jQuery;
$(document).ready(function(){
         
var i = $("#name1").val();
 
   
$("#viewer").iviewer(
{
src: "sdf.jpeg", 
update_on_resize: false,
                       zoom_animation: false,
                       mousewheel: false,
                       onMouseMove: function(ev, coords) { },
                       onStartDrag: function(ev, coords) { return false; }, //this image will not be dragged
                       onDrag: function(ev, coords) { }
                  });
                   $("#in").click(function(){ iv1.iviewer('zoom_by', 1); }); 
                   $("#out").click(function(){ iv1.iviewer('zoom_by', -1); }); 
                   $("#fit").click(function(){ iv1.iviewer('fit'); }); 
                   $("#orig").click(function(){ iv1.iviewer('set_zoom', 100); }); 
                   $("#update").click(function(){ iv1.iviewer('update_container_info'); });
                       
 
                  var iviewer = {};
      var i = $("#name1").val();
                  $("#viewer2").iviewer(
                  {
       
                      src: 'pic/'+i,
                      initCallback: function()
                      {
                        iviewer = this;
                      }
                  });
 
                  $("#chimg").click(function()
                  {
                    iviewer.loadImage("test_image.jpg");
                    return false;
                  });
            });
   
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 6,803
1 Sergey Alexandrovich Kryukov 6,377
2 DamithSL 5,421
3 Manas Bhardwaj 4,841
4 Maciej Los 4,330


Advertise | Privacy | Mobile
Web03 | 2.8.1411023.1 | Last Updated 24 Jan 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100