javascript– 替代嵌套在另一种形式的Ajax上载表单

javascript– 替代嵌套在另一种形式的Ajax上载表单,第1张

概述我有一个HTML表单来编辑我在我工作地点的数据库系统中的人员的详细信息.表单的一部分允许用户上传该人的图片.然而,这给我带来了麻烦,因为我试图通过让用户上传图片并在提交要保存的人员详细信息之前成功上传图片来使表单更加Ajax-y.给我带来麻烦的部分是它似乎需要一个嵌套的表单(即详细信息表单中的上传表单),如下所示:<form name='details

我有一个HTML表单来编辑我在我工作地点的数据库系统中的人员的详细信息.表单的一部分允许用户上传该人的图片.然而,这给我带来了麻烦,因为我试图通过让用户上传图片并在提交要保存的人员详细信息之前成功上传图片来使表单更加AJAX-y.给我带来麻烦的部分是它似乎需要一个嵌套的表单(即详细信息表单中的上传表单),如下所示:

我希望它的工作方式是用户填写表单的详细信息,选择图片并点击“上传”按钮,然后在上传文件时进行AJAX更新,以便他们可以看到按下最后的“提交”按钮之前的图片.

是否有一种很好的方法可以让上传表单在“详细信息表单”内部(至少在页面上显示)但不嵌套在HTML中的详细信息表单中?

最佳答案您不能在有效的HTML中将表单嵌套在彼此内部.此外,通过XMLhttpRequest对象(最常见的AJAX技术)上传文件在大多数浏览器中都不起作用.

不过,一切都不会丢失.对于AJAX上传,您需要使用iframe,如下所示:http://www.webtoolkit.info/ajax-file-upload.html

我建议表单的方法是将其拆分为三个表单元素.您将拥有一个表单,其中包含上载表单之前的字段,上载表单以及保存上载表单后的字段的表单.第一个表单没有任何提交按钮.第一种形式的字段以第三种形式复制,作为隐藏输入.当单击最后一个表单的提交按钮时,将运行一些JavaScript,将第一个表单中的字段数据复制到第三个表单,因此它将以最后一个表单提交.

例如,您的HTML可能如下所示::

总结

以上是内存溢出为你收集整理的javascript – 替代嵌套在另一种形式的Ajax上载表单全部内容,希望文章能够帮你解决javascript – 替代嵌套在另一种形式的Ajax上载表单所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1125397.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-30
下一篇 2022-05-30

发表评论

登录后才能评论

评论列表(0条)