Geek Answers Handbook

How can I upload files using hidden iframe + jquery?

We all know that it is not possible to upload files using jquery. But you can work using jquery and a hidden IFrame.

I found four solutions using this method, but I don’t see how I can implement it.

  • Stack Overflow But I'm not sure if this is the best way. (not verified)

  • Using the jQuery Form plugin is another option. I tried to run this example , but that did not help. The solution loads my uploader.php on a new page and cannot get file information. I do not see it with an IFrame.

  • Uploading an Ajax file is another solution - this is splitting a dynamic IFrame. If you look at the example code, I cannot figure out how to implement this.

  • Last Solution Download the AJAX file from Webtoolkit. Here I cannot figure out where I should declare which PHP file it should load for file processing.

Does anyone have a working example using one of these methods?
I used Uploadify in another solution, but now I do not want to use flash.

+4
source share
1 answer

Over # 3 This is mostly straight from their site.

I am a .Net guy, so I cannot help you with the .php handler, you will need to get the file, but I hope you find this useful.

<html> <head> <link href="http://www.phpletter.com/css/general.css" rel="stylesheet" type="text/css" media="screen"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="http://www.phpletter.com/contents/ajaxfileupload/ajaxfileupload.js"></script> <script type="text/javascript"> function ajaxFileUpload() { $.ajaxFileUpload ( { //YOUR URL TO RECEIVE THE FILE url: 'http://localhost/testing/postfile.php', secureuri:false, fileElementId:'fileToUpload', dataType: 'json', success: function (data, status) { if(typeof(data.error) != 'undefined') { if(data.error != '') { alert(data.error); }else { alert(data.msg); } } }, error: function (data, status, e) { alert(data.error); alert(e); } } ) return false; } </script> </head> <body> <form name="form" action="" method="POST" enctype="multipart/form-data"> <table cellpadding="0" cellspacing="0" class="tableForm"> <thead> <tr> <th>Ajax File Upload</th> </tr> </thead> <tbody> <tr> <td><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"></td> </tr> <tr> <td>Please select a file and click Upload button</td> </tr> </tbody> <tfoot> <tr> <td><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></td> </tr> </tfoot> </table> </form> </body> </html>
+2
source

More articles:


All Articles