关于jquery.form插件,提交表单成功后无法POST数据。

Netplaier 2011-02-09 04:11:02
1、当未成功上传图片时提交表单,参数能正常传递给DO.ASP。
2、当上传图片成功,提交表单,DO.asp无法正常接收值。
3、如此方法行不通,希望能帮我想个解决办法。

高手只要打开运行一试就知道,
http://u.115.com/file/f7648a190c 整理后的演示用的源码下载。

主要的代码:

<!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>



...全文
1145 9 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
Netplaier 2011-02-15
  • 打赏
  • 举报
回复
网上那些无刷新上传虽然成功,但有一点大多数无法在一个form表单上进行上传和表单提交两步处理。。如果只需达到单步一个上传操作,form action给某上传函数很容易达到。。

就没人把这例子下载看下嘛?? http://u.115.com/file/f7648a190c
Netplaier 2011-02-12
  • 打赏
  • 举报
回复
http://u.115.com/file/f7648a190c 谁能下载看下嘛???

我直接用的是xhEditor的UPLOAD.ASP上传程序,代码基本没动。

返回内容是标准的json字符串,结构如下:{"err":"","msg":"200906030521128703.gif"} 或者 {"err":"","msg":{"url":"200906030521128703.jpg","localfile":"test.jpg","id":"1"}}

上传文件的地址通过上传文件域的name为:filedata表单POST提交。。
kaifadi 2011-02-11
  • 打赏
  • 举报
回复
楼主可以研究一下论坛里前年有人发过一编无刷新文件上传的文章,里面有针对ASP,PHP,。NET的例子,你把ASP例子看清楚了。我想你的问题也就解决了。
kaifadi 2011-02-11
  • 打赏
  • 举报
回复
我觉得核心应该在于upload.asp文件上,ASP上传就是麻烦,不像PHP,。NET都有专用函数,所以我感觉最后要处理的应该也是upload.asp这个文件,输入输出都是什么,我没有细节化过upload.asp,但是我觉得一般出问题在这里的概率比较大!
Netplaier 2011-02-11
  • 打赏
  • 举报
回复
我写的完整的问题演示文档就在这里面。。 文件大小:61.9KB 就几个必要文件。
http://u.115.com/file/f7648a190c


1:上面的options的url指的是什么???

答:upload.asp 是指的无组件上传程序。

2:文件上传的数据发送和后台接收方式与一般的表单项是一样的???

答:本程序共分两部,功能类似于传统的iframe上传方式。
1:先通jQuery Form Plugin提交上传地址并上传图片。
2:上传完图片,填写完整表单,再提交表单至DO.asp处理。



打字员 2011-02-10
  • 打赏
  • 举报
回复
我承认,jquery.form这个东西我没用过。。。。

但有两点我想问一下:

1:

options={
url:'upload.asp',
beforeSubmit: showRequest, //表单提交前执行的方法
success: showResponse //当表单提交后执行的函数。
};

上面的options的url指的是什么???

2:
文件上传的数据发送和后台接收方式与一般的表单项是一样的???

Netplaier 2011-02-09
  • 打赏
  • 举报
回复
楼上的大哥,不知你看懂了没?我那样写是用的jQuery Form Plugin,其要求的调用格式。。。


另外,你可以试下,加上这个,enctype="multipart/form-data" 八成提交表单后传递不了数据。。。。。


自己不仔细看。。还装懂。。 有本事你解决问题。。
打字员 2011-02-09
  • 打赏
  • 举报
回复
form要有enctype="multipart/form-data" 属性。

另外,这是你自己写的吗?

url:'upload.asp'

action="do.asp"

LZ中了Ajax的毒太深了,不过也不怪LZ。

都是一些不负责的人在那里以鹅传鹅,结果搞的一个个都像打了鸡血一样,“Ajax好强大”...“无所不能的JS”...

在论坛里搜索“无刷新上传文件”好好看看就知道了。

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧