Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I wrote a <a href="http://www.joshclarkson.net/blog/file-uploads-in-a-hidden-iframe-using-jquery/" rel="nofollow noreferrer">blog post</a> about doing this with jQuery to upload a file using a hidden iframe. Here's the code:</p> <p>Here is the HTML for the form:</p> <pre><code>&lt;div id="uploadform"&gt; &lt;form id="theuploadform"&gt; &lt;input type="hidden" id="max" name="MAX_FILE_SIZE" value="5000000" &gt; &lt;input id="userfile" name="userfile" size="50" type="file"&gt; &lt;input id="formsubmit" type="submit" value="Send File" &gt; &lt;/form&gt; </code></pre> <p>The DIV in which to allow jQuery to create the iframe you can hide it with a little CSS:</p> <pre><code>&lt;div id="iframe" style="width:0px height:0px visibility:none"&gt; &lt;/div&gt; </code></pre> <p>The DIV in which to show the results of the callback:</p> <pre><code>&lt;div id="textarea"&gt; &lt;/div&gt; </code></pre> <p>The jQuery code:</p> <pre><code>&lt;script type="text/javascript" src="js/jquery-1.3.2.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $("#formsubmit").click(function() { var userFile = $('form#userfile').val(); var max = $('form#max').val(); var iframe = $( '&lt;iframe name="postframe" id="postframe" class="hidden" src="about:none" /&gt;' ); $('div#iframe').append( iframe ); $('#theuploadform').attr( "action", "uploader.php" ) $('#theuploadform').attr( "method", "post" ) $('#theuploadform').attr( "userfile", userFile ) $('#theuploadform').attr( "MAX_FILE_SIZE", max ) $('#theuploadform').attr( "enctype", "multipart/form-data" ) $('#theuploadform').attr( "encoding", "multipart/form-data" ) $('#theuploadform').attr( "target", "postframe" ) $('#theuploadform').submit(); //need to get contents of the iframe $("#postframe").load( function(){ iframeContents = $("iframe")[0].contentDocument.body.innerHTML; $("div#textarea").html(iframeContents); } ); return false; }); }); &lt;/script&gt; </code></pre> <p>I used a php app like this uploader.php to do something with the file:</p> <pre><code>&lt;?php $uploaddir = 'uploads/'; $uploadfile = $uploaddir . basename($_FILES['userfile']['name']); $maxfilesize = $_POST[MAX_FILE_SIZE]; if ($maxfilesize &gt; 5000000) { //Halt! echo "Upload error: File may be to large.&lt;br/&gt;"; exit(); }else{ // Let it go } if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) { print('File is valid, and was successfully uploaded. '); } else { echo "Upload error: File may be to large.&lt;br/&gt;"; } chmod($uploadfile, 0744); ?&gt; </code></pre> <p>There's more there than you need, but it illustrates the concept in jQuery.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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