initial commit

dellsala · Mar 27, 2012 · f2272f2 · f2272f2
commit f2272f2
Show file tree

Hide file tree

Showing 3 changed files with 150 additions and 0 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<title>jQuery Asynchronous Upload</title>
+    <style type="text/css">
+
+    #uploadButton {
+        padding: 0;
+        margin: 0;
+        border-radius: 5px;
+        background-color: #660;
+        color: #FFF;
+        width: 150px;
+        height: 40px;
+        border: none;
+        vertical-align: middle;
+    }
+
+    #uploadButton.disabled {
+        background-color: #999;
+    }
+
+    #loading {
+        vertical-align: middle;
+        background-color: #FF9;
+    }
+
+
+    </style>
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+	<script src="../jquery.uploader.js"></script>
+	<script>
+
+$(function () {
+	$('#uploadButton').uploader({
+	    url : './upload.php',
+	    onStart : function (data) {
+	        $('#loading').show();
+	        this.$button.addClass('disabled');
+	    },
+	    onComplete : function (data) {
+	        $('#loading').hide();
+	        this.$button.removeClass('disabled');
+	        alert(data);
+	    }
+	});
+});
+
+	</script>
+</head>
+<body>
+
+    <div>
+        <input type="button" id="uploadButton" value="Upload File">
+        <span id="loading" style="display:none;">Loading…</span>
+    </div>
+
+</body>
+</html>
diff --git a/demo/upload.php b/demo/upload.php
@@ -0,0 +1,5 @@
+<?php
+
+sleep(2);
+
+echo "This is the server upload response!";
diff --git a/jquery.uploader.js b/jquery.uploader.js
@@ -0,0 +1,85 @@
+(function ($) {
+
+
+    $.fn.uploader = function (options) {
+
+        this.each(function (index) {
+
+            var uploaderOptions = $.extend({}, options);
+            uploaderOptions.buttonElement = this;
+            new Uploader(uploaderOptions);
+
+        });
+
+    }
+
+
+    function Uploader (options) {
+
+        var that = this;
+
+        this.options = $.extend({}, {
+            url : 'upload.php',
+            buttonElement : null,
+            inputName : 'ajax_file',
+            onStart : function () {},
+            onComplete : function (response) {}
+        }, options);
+
+        this.id = ((new Date()).getTime());
+        this.$button = $(this.options.buttonElement);
+
+
+        // assemble upload form/frame mechanics
+
+        this.$form = $('<form id="uploader_form_'+this.id+
+            '" action="'+this.options.url+'" method="post" '+
+            'enctype="multipart/form-data" target="uploader_frame_'+this.id+
+            '"></form>');
+
+        this.$frame = $('<iframe name="uploader_frame_' + this.id + '" src="about:blank" \/>');
+        this.$frame.css("display", "none");
+
+        this.$input = $('<input type="file" name="'+this.options+'">');
+        this.$input.on('change', function () {
+            that.$input.attr('disabled', 'disabled');
+            this.form.submit();
+            that.options.onStart.call(that);
+        });
+
+
+        // position upload over button
+
+        var buttonOffset = this.$button.offset();
+
+        this.$form
+            .width(this.$button.outerWidth())
+            .height(this.$button.outerHeight())
+            .css({
+                overflow : 'hidden',
+                position : 'absolute',
+                top : buttonOffset.top+'px',
+                left : buttonOffset.left+'px',
+                opacity: '0'
+            });
+
+        this.$input.css({
+            fontSize : (this.$button.outerHeight() + 20) + 'px',
+            cursor: 'pointer'
+        });
+
+        // attach to document
+
+        this.$form.append(this.$input);
+        $('body').append(this.$form).append(this.$frame);
+
+        this.$frame.on('load', function (e) {
+            var $body = $(window.frames['uploader_frame_'+that.id].document.getElementsByTagName('body')[0]);
+            that.options.onComplete.call(that, $body.html());
+            that.$input.removeAttr('disabled');
+            that.$form.get(0).reset();
+        });
+
+    }
+
+})(jQuery);