Simple jQuery file upload plugin (using only iframes)

Question

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.

So here it is:

This is the html form you can set up to use it:

<form enctype="multipart/form-data" class="fileUpload">
    <input type="file" name="uploadFile" />
</form>

This is how the plugin is called:

$("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(){          

        }   
    }); 
});

This is the plugin itself:

(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() {

                $('<iframe />', {
                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);

uploadPhoto.php:

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

Can you please post the uploadPhoto.php code over here if you still have with you? It would be very helpful. Thanks! — VishwaKumar
– VishwaKumar, Commented Mar 22, 2013 at 10:39
i 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. — shababhsiddique
– shababhsiddique, Commented May 25, 2013 at 2:30
you can use this one inside an iframe github.com/blueimp/jQuery-File-Upload#download — shababhsiddique
– shababhsiddique, Commented May 25, 2013 at 2:33
@shababhsiddique Your comment doesn't make any sense. Read the question again. The OP is trying to make use of hidden iframes to upload files. No reason to use a plug-in that falls back to uploading via iframes, inside of an iframe! You've missed the point of the question entirely. — Ray Nicholus
– Ray Nicholus, Commented Oct 6, 2013 at 20:36

btm1 · Accepted Answer · 2013-10-13 08:16:23Z

1

You can use fine uploader. I use it in a production application and it works very well. We've even got it uploading directly to S3.

http://fineuploader.com/

answered Oct 13, 2013 at 8:16

btm1

3,8562 gold badges25 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Simple jQuery file upload plugin (using only iframes)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related