How to upload image ,resize and show on same page.

Question

1.00/5 (1 vote)

See more:

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).

XML

<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 18:48pm

Rajeshkrathor

Updated 25-Sep-12 20:22pm

v2

Add a Solution

Comments

Mohibur Rashid 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)

2 solutions

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.

Posted 25-Sep-12 19:12pm

Isuru Nanayakkara

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Rajeshkrathor · Accepted Answer · 2013-01-23T22:06:00

JavaScript

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;
                  });
            });