Databases
StackOverflow2013
Postsdbo
POjQuery and iFrame "ajax" image uploader not working correctly
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery and iFrame "ajax" image uploader not working correctly
    text
    copied!<p>I am using twitter bootsrap, and more specifically Jasny's file upload widget.</p> <p><a href="http://jasny.github.io/bootstrap/javascript.html#fileupload" rel="nofollow">http://jasny.github.io/bootstrap/javascript.html#fileupload</a></p> <p>I have to cater for older browsers so am using it in conjunction with an iframe upload script to give the illusion to the user of an ajax upload.</p> <p>Using jQuery 1.9.1 my plan is to clone the file input field from the main registration form into the secondary form that submits to the iframe. This is triggered on change of the file input.</p> <p>I have a form with text fields in it, and an image uploader. The HTML in question looks like this:</p> <pre><code>&lt;div&gt; &lt;span class="btn btn-file"&gt; &lt;span class="fileupload-new"&gt;Select image&lt;/span&gt; &lt;span class="fileupload-exists"&gt;Change&lt;/span&gt; &lt;input type="file" name="avatar"/&gt; &lt;/span&gt; &lt;a href="#" class="btn fileupload-exists" data-dismiss="fileupload"&gt;Remove&lt;/a&gt; &lt;/div&gt; </code></pre> <p>I want to clone the file input "avatar" into another form at the bottom of the page, that looks like this:</p> <pre><code>&lt;form id="upload_image" name="upload_image" enctype="multipart/form-data" method="post" action="/index.php/ajax/avatar/upload" target="upload_target"&gt; &lt;!-- just an empty form really --&gt; &lt;input id="sent" name="sent" type="submit" value="Upload" /&gt; &lt;/form&gt; </code></pre> <p>My JavaScript currently looks like this:</p> <pre><code> $("input[name='avatar']").on('change',function(){ var $this = $(this); $clone = $this.clone(); $this.after($clone).appendTo("form#upload_image"); $("form#upload_image").submit(); }); </code></pre> <p>The first time the an image is selected to be uploaded, the widget works and the script runs, but no image is passed to the script.</p> <p>Subsequent attempts, the widget doesnt update anymore and the script doesnt run.</p> <p>It seems to fall over at the line: $this.after($clone).appendTo("form#upload_image");</p> <p>Does anybody have any ideas what could be the cause of the problem?</p> <p>Many thanks in advance.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload