Geek Answers Handbook

Alternative to Ajax upload form nested in another form

I have an HTML form to edit the details of a person in the database system that I have at work. Part of the form allows the user to upload an image of a person. However, this is causing me problems because I am trying to make the form more Ajax-y, allowing the user to upload the image and see it successfully loaded before sending personal data for saving. The part that is not pleasant to me is that it seems to require a nested form (i.e., a loading form inside a parts form), for example:

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

The way I hope to do this is that the user fills out the details of the form, selects the image and clicks the Download button, then performs an AJAX update when the file is uploaded so that they can see the image before clicking the last Send button.

Is there a good way for the loading form to be “inside” the data form (at least in the view on the page), but not nested inside the details form in HTML?

+5
source share
2 answers

You are not allowed to have forms embedded in each other in valid HTML. In addition, downloading files through XMLHTTPRequest objects (the most common AJAX method) does not work in most browsers.

. AJAX IFRAME, : http://www.webtoolkit.info/ajax-file-upload.html

, , , form. , , , . . , . , javascript, , .

, HTML- :

<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>
+8

"" , " ...".

. , .

<div id="nestedform">
    <form name="pictureupload">
        <input type="file" name="pic">
        <input type="submit" name="upload" value="Upload">
    </form>
</div>

<div id="mainform">
<form name="details">
    <input name="detail1">
    <input name="detail2">
     <a href="#" onclick="Code to pop up the nested form">Upload Picture...</a>
    <input type="submit">
</form>
</div>
+3

More articles:


All Articles