Databases
StackOverflow2013
Postsdbo
POSimple jQuery file upload plugin (using only iframes)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSimple jQuery file upload plugin (using only iframes)
    primarykey
    data
    text
    <p>I had spent many hours searching the web to find a very simple and basic jQuery plugin to allow me to upload files without refreshing the page, I didn't want these big plugins with all their fancy techniques, and I wanted it to be easily added to my website. So I have just made my own little jQuery plugin to do so, and I have decided to share it with all of you in case anyone else is looking for one. Now I am not an expert with creating jQuery plugins, so if there are any improvements I could make, do let me know.</p> <p>So here it is:</p> <p><strong>This is the html form you can set up to use it:</strong></p> <pre><code>&lt;form enctype="multipart/form-data" class="fileUpload"&gt; &lt;input type="file" name="uploadFile" /&gt; &lt;/form&gt; </code></pre> <p><strong>This is how the plugin is called:</strong></p> <pre><code>$("body").on("change", ".fileUpload", function(){ $(this).fileUpload({ form: $(this), //selector of the form actionURL: "uploadPhoto.php", //directory to handle upload success: function(html){ //on successful upload, in this case if there is any html returned $("body").prepend(html); }, error: function(){ } }); }); </code></pre> <p><strong>This is the plugin itself:</strong></p> <pre><code>(function($){ $.fn.extend({ fileUpload: function(options) { var defaults = { form: null, actionURL: null, success: function(){}, error: function(){}, }; var options = $.extend(defaults, options); return this.each(function() { $('&lt;iframe /&gt;', { id: 'upload_iframe', name: 'upload_iframe', style: 'width:0; height:0; border:none;' }).appendTo('body'); var form = $(options.form); form.attr("action", options.actionURL); form.attr("method", "post"); form.attr("enctype", "multipart/form-data"); form.attr("encoding", "multipart/form-data"); form.attr("target", "upload_iframe"); form.submit(); $("#upload_iframe").load(function () { html = $("#upload_iframe")[0].contentWindow.document.body.innerHTML; html!='' ? options.success.call(this, html) : options.error.call(this); $("iframe#upload_iframe").remove(); }); }); } }); })(jQuery); </code></pre> <p><strong>uploadPhoto.php:</strong></p> <pre><code>foreach($_FILES as $file) { foreach ($file['uploadFile'] as $name) { $fileArr = explode("." , $name); $ext = strtolower($fileArr[count($fileArr)-1]); $allowed = array("jpg", "jpeg", "png", "gif", "bmp"); if(in_array($ext, $allowed)) { $source = $file['tmp_name'][$i++]; $path = "images/"; $filename = uniqid(); if (move_uploaded_file($source, $path.$filename.$ext)) { //Do whatever on success of file upload } } } } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDylan Cross
    1. USDylan Cross
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POSimple jQuery file upload plugin (using only iframes)
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POSimple jQuery file upload plugin (using only iframes)
      1. USVishwaKumar
      1. VTFavorite
    3. VO
      singulars
      1. POSimple jQuery file upload plugin (using only iframes)
      1. USapo
      1. VTFavorite
    1. COCan you please post the uploadPhoto.php code over here if you still have with you? It would be very helpful. Thanks!
      singulars
      1. POSimple jQuery file upload plugin (using only iframes)
      1. USVishwaKumar
    2. COI have added the `html` and `php`
      singulars
      1. POSimple jQuery file upload plugin (using only iframes)
      1. USDylan Cross
    3. COi was looking for something same. it turned out that using a standalone upload application in a iframe is the easiest way. I am not sure if they are secure however.
      singulars
      1. POSimple jQuery file upload plugin (using only iframes)
      1. USshababhsiddique
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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