如何上传图片，调整大小并在同一页面上显示。 [英] How to upload image ,resize and show on same page.
本文介绍了如何上传图片，调整大小并在同一页面上显示。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
嗨朋友们，
我有表格，我上传图片并想在同一个地方展示。并在一个固定大小的盒子里。
像任何在线表格一样，我们填写工作或任何婚姻网站。
如果有人有任何想法然后请让我知道，它是紧急的。
这是我的表格（如果可能的话，使用上述任何一种语言）。
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> </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> </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> </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> </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
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.
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;
这篇关于如何上传图片，调整大小并在同一页面上显示。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
