日期:2014-05-19  浏览次数:20449 次

附件和数据上传问题,300分,分步给
我遇到一个比较特殊的问题,请教各位达人,问题是这样的:

我在一个页面上有一些表单数据和文件列表,表单数据是要保存到数据库中,但是由于特殊原因只能采用异步提交。如果保存成功之后,返回一个ID。

在表单数据成功保存后,进行文件的上传和文件信息的数据保存到数据库,记录的主键就是之前返回的ID。

如果表单数据没有保存成功,则不上传文件,也不保存文件信息到数据库中。

其中关键的需要注意的地方是:
1、表单数据必须要采用异步提交。
2、表单数据保存成功后,返回一个ID是之后保存上传的文件信息用的主键值

请教了,如果有小的例子,300分全部奉上

------解决方案--------------------

------解决方案--------------------
能不能分两步,第一步保存表单数据,第二步上传文件并保存文件信息
------解决方案--------------------
因为自己前段日子有兴趣在写一个基于ajax实现的博客.所以正好也碰到过无刷新上传的问题..hehe

其实实现很简单...你必须有一个iframe然后通过这个iframe实现无刷新上传而不影响页面上的其它数据..
首先你必须设置一下form的属性...它的target必须是upload_iframe 也就是你页面的那个iframe,这样就可以通过iframe进行整个表单数据的提交而不是通过整个页面的刷新.
你可以在上传按钮写一些javascript事件...这个可写可不写...
然后上传完毕后,必须重置这个file控件.. 以表示上传完毕...但是如果直接执行document.form.reset() 会把页面其它数据和控件进行重置....所以必须通过javascript创建一个临时的form把那个file对象放进去重置..

//清空file内的值... 因为如果清空页面的表单form1的值.会清空所有表单的值..
//创建一个临时form用来清空file, 然后记住file的当前位置.清空后再插入回去
function clearFileInput()
{
var file = document.getElementById( 'imgfileupload ');
var form = document.createElement( 'form ');
document.body.appendChild(form);
var pos=file.nextSibling;
form.appendChild(file);
form.reset();
pos.parentNode.insertBefore(file,pos);
document.body.removeChild(form);
}

别忘记在服务器端执行完毕后执行这段代码...用response.write( " <script> parent.clearFileInput(); </script> ")

<form id= "form1 " runat= "server " method= "post " target= "upload_iframe " enctype= "multipart/form-data " onsubmit= "return false; ">
<input type= "file " id= "imgfileupload " runat= "server "/>
<input type= "submit " id= "btnUpload " value= "上传 " runat= "server " onclick= "onSubmit(); "/>
<iframe name= "upload_iframe " style= "display:none; "> </iframe>
....页面的其它数据和控件..
</form>
------解决方案--------------------
其中关键的需要注意的地方是:
1、表单数据必须要采用异步提交。
2、表单数据保存成功后,返回一个ID是之后保存上传的文件信息用的主键值
--------------------------------------
如果等到异步提交后再上传文件,那异步的就没有意义
可以
a.将1,2同时异步提交给后端代码,
b.后端代码运行1的业务逻辑,并生成id作为返回值;保存2的文件与文件信息到数据库,但与1提交的表单数据与文件关联
c.运行异步调用的回调处理逻辑,将1返回的id改写数据库中文件记录,建立表单数据与上传文件的关联
上面省去了错误处理