替代嵌套在另一种形式的Ajax的上传表单 [英] Alternative to an Ajax upload form nested in another form

问题描述

我有一个HTML表单在数据库系统中我在我工作的地方编辑一个人的细节。形式的一部分，用户可以上载的人的图像。然而，这是给我的麻烦，因为我试图使形式更加的Ajax-Y通过让用户上传的图片，看看它是成功上传他们提交的人的详细信息被保存之前。多数民众赞成给我找麻烦的部分是，它似乎是必要的嵌套形式（即上传表单里面的细节构成），就像这样：

I have an HTML form to edit the details of a person in a database system I have at my place of work. Part of the form allows the user to upload a picture of the person. However, this is giving me trouble, because I'm trying to make the form more Ajax-y by letting the user upload the picture and see it successfully uploaded before they submit the person's details to be saved. The part that's giving me trouble is that it seems to necessitate a nested form (that is, the upload form inside the details form), like so:

<form name="details">
    <input name="detail1">
    <input name="detail2">
    <form name="pictureupload">
        <input type="file" name="pic">
        <input type="submit" name="upload" value="Upload">
    </form>
    <input type="submit">
</form>

我希望使它的工作方式是，用户将填写表单的细节，选择图片，点击上传按钮，然后做一个AJAX更新时，该文件被上传，让他们可以看到$ P $之前的图片pssing最后的提交按钮。

The way I'm hoping to make it work is that the user would fill out the details of the form, select a picture and hit the "Upload" button, then do an AJAX update when the file is uploaded so that they can see the picture before pressing the final "Submit" button.

是否有具有上载形式是内部的细节形成（至少在外观上的页面上），但不嵌套的细节形成在HTML的好方法

Is there a good way to have the upload form be "inside" the details form (at least in appearance on the page) but not nested inside the details form in the HTML?

推荐答案

您不得有相互嵌套在有效的HTML表单。此外，通过XMLHTT prequest对象文件上传（最常见的AJAX技术）在大多数浏览器不工作。

You aren't allowed to have forms nested inside each other in valid HTML. Also, file uploads through XMLHTTPRequest objects (the most common AJAX technique) don't work in most browsers.

没有失去一切，虽然。对于AJAX的上传，您将需要使用一个IFRAME，为presented这里：<一href="http://www.webtoolkit.info/ajax-file-upload.html">http://www.webtoolkit.info/ajax-file-upload.html

All is not lost, though. For the AJAX uploads, you will need to use an IFRAME, as presented here: http://www.webtoolkit.info/ajax-file-upload.html

我会建议为形式的方法是把它分成三个表格元素。你将有持有领域的上传表单，上传表单，并保存上传表单后场的形式之前的一种形式。第一种形式不会有任何的提交按钮。在第一表格中的字段被复制在第三种形式中，为隐藏输入。当单击最后一个表单的提交按钮，一些javascript运行，将在第一个表单字段的数据复制到了第三，所以它被提交的最后一种形式。

The approach I would suggest for the form is to split it into three form elements. You will have a form that holds the fields before the upload form, the upload form, and the form that holds the fields after the upload form. The first form will not have any submit button. The fields in the first form are duplicated in the third form, as hidden inputs. When the last form's submit button is clicked, some javascript will run that will copy the field data from the first form into the third, so it gets submitted with the last form.

例如，您的HTML可能看起来像这样::

For example, your HTML might look like this::

<form name="details1">
    <input id="fake_detail1" name="detail1" type="text"/>
    <input id="fake_detail2" name="detail2" type="text"/>
</form>
<form name="pictureupload">
   <input type="file" name="pic">
   <input type="submit" name="upload" value="Upload">
</form>
<form name="details2">
    <input id="detail1" name="detail1" type="hidden"/>
    <input id="detail2" name="detail2" type="hidden"/>
    <input id="detail3" name="detail3" type="text"/>
    <input type="submit">
</form>

这篇关于替代嵌套在另一种形式的Ajax的上传表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！