如何上传图片，调整大小并在同一页面上显示。

问题描述：

嗨朋友们，

我有表格，我上传图片并想在同一个地方展示。并在一个固定大小的盒子里。

像任何在线表格一样，我们填写工作或任何婚姻网站。

如果有人有任何想法然后请让我知道，它是紧急的。

这是我的表格（如果可能的话，使用上述任何一种语言）。

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

答

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.

var

= jQuery;

如何上传图片，调整大小并在同一页面上显示。

相关推荐