87,997
社区成员




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>后台表单图片Ajax上传演示</title>
<script language="javaScript" type="text/javascript" src="Script/jquery-1.4.4.js"></script>
<script language="javaScript" type="text/javascript" src="Script/jquery.form-2.63.js"></script>
<script type="text/javascript">
function uploadImage() {
options={
url:'upload.asp',
beforeSubmit: showRequest, //表单提交前执行的方法
success: showResponse //当表单提交后执行的函数。
};
$("#myform").ajaxSubmit(options);
function showRequest(){
var upfileVal=$("input[name='filedata']").val();
var msg="";
if(upfileVal=="") msg=msg+"\n请选择上传的图片!";
if(msg==""){
$("#show_put").append(new Date() + '\rMsg: '+'正在上传...\r');
return true;
}
else{
alert(msg);
$("#show_put").append(new Date() + '\rMsg: '+msg+'\r');
return false;
}
}
function showResponse(responseText){
$("#show_put").append(new Date() + '\rMsg: '+'文件上传成功。\r');
$("input[name='picpath']").val(eval("("+responseText+")").msg.url);
$("#show_put").append(new Date() + '\rMsg: 回调参数:'+responseText+'\r');
alert("上传成功!");
}
};
</script>
</head>
<body>
<p>
<b>后台表单Ajax上传演示</b>
<hr />
</p>
<form id="myform" name="myform" method="post" action="do.asp">
标题:
<input name="Title" type="text" id="Title" size="50" />
<p> 图片:
<input name="picpath" type="text" id="picpath" size="50" />
<input name="filedata" type="file" id="filedata" size="30" />
<input name="btn" type="button" id="btn" value="上传" onclick="uploadImage();"/>
</p>
<p> 备注:
<textarea name="comment" cols="80" rows="5" id="comment"></textarea>
</p>
<p>
<input type="submit" name="Submit2" value="提交" />
</p>
</form>
<hr />
结果输出:
<br>
<textarea name="show_put" cols="80" rows="15" id="show_put" style="background:#FFFF99;color:#FF0000"></textarea>
</body>
</html>
options={
url:'upload.asp',
beforeSubmit: showRequest, //表单提交前执行的方法
success: showResponse //当表单提交后执行的函数。
};