图片和表单文字信息通过一个按钮来完成提交

来源:互联网 发布:linux 测试端口开放 编辑:程序博客网 时间:2024/05/16 01:21

这几天根据前方市场的需求要求将福建某一项目的sysylog上传日志的页面修改一下,结果这个需求是变了又变,显示做好了有裁减了,后来又要补充上,因为页面的代码几乎全部删光了,弄得我是欲哭无泪啊,现在才凸显架构设计师的作用,要是早知道最终是个什么产品,何必改来改去又该回到以前的样子,不过这个平台的代码是有框架的,全部的页面采用框架完成,有框架自然省事,但是你想突破它的框架去自己新增加一些自己的代码进去就很麻烦了,因为这个框架不是很完善,话说几乎没有非常完善的框架,还是得需要根据实际情况添加修改代码,说了这么多,感觉全是废话,也是今天周末来加班的原因。

问题就是在一个应经写好的文字提交表单增加一个上传文件的代码,起初想到了form表单:

<form  id='upload_ca_la' name='upload_ca_la' method='post'  action='index.php?module=alarm&bean=basic&action=index&upload_type=upload_ca_la' enctype='multipart/form-data'">

.........................

</form>

但是又要引用以前的框架,通过一个按钮完成表单和图片的上传,但是这里显然必须要再添加一个按钮又来提交图片,于是想到了当前点击以前的按钮之后先去通过js完成图片的点击上传,   document.getElementById("upload_ca_la").submit.click(); 
之后再去处理表单信息的提交,但是大家知道一旦form表单提交后页面就跳转了,这时框架就又让index.html刷新了,此时原来的表单信息全没有了,功能未实现,百度后发现这个图片的上传之后可以采用类似ajax的页面无刷新,只刷新图片的form表单,通过<iframe width="1" height="1" frameborder="0" name='hidden_frame' id="hidden_frame"></iframe>来实现,但是上面form中要加上刷新的制定即只刷新<iframe>,于是<form  id='upload_ca_la' name='upload_ca_la' method='post'  action='index.php?module=alarm&bean=basic&action=index&upload_type=upload_ca_la' enctype='multipart/form-data' target="hidden_frame" >,至此就可以了,我特意将iframe的宽和高设置为了1个像素,border设为了0,这样在页面上就看到不到这个iframe了。

原创粉丝点击