Initial commit

drogus · Jun 27, 2008 · 9d8427f · 9d8427f
commit 9d8427f
Show file tree

Hide file tree

Showing 6 changed files with 182 additions and 0 deletions.
diff --git a/.project b/.project
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>jquery-upload-progress</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+	</buildSpec>
+	<natures>
+	</natures>
+</projectDescription>
diff --git a/example/.tmp_index.html~ b/example/.tmp_index.html~
@@ -0,0 +1,25 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+	<head>
+		<title>ajaxFileUpload</title>
+	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+		<script src="../lib/jquery.js"></script>
+		<script src="../jquery.ajaxFileUpload.js"></script>
+		<script type="text/javascript">
+			$(function() {
+				$('form').ajaxFileUpload({uploadFinished: function() {
+					alert('skonczone');
+				}});
+			});
+		</script>
+	</head>
+
+	<body>  
+		<form method="post" enctype="multipart/form-data" action="upload.html">
+			<input type="file" />
+			<input type="submit" />
+		</form>
+	</body>
+</html>
+
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+	<head>
+		<title>ajaxFileUpload</title>
+	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+		<script src="../lib/jquery.js"></script>
+		<script src="../jquery.uploadProgress.js"></script>
+		<script type="text/javascript">
+			$(function() {
+				$('form').uploadProgress({
+					start:function(){},
+					uploading: function(upload) {$('#percents').html(upload.percents+'%');},
+					interval: 2000
+			    });
+			});
+		</script>
+		<style type="text/css">
+			.bar {
+			  width: 300px;
+			}
+
+			#progress {
+			  background: #eee;
+			  border: 1px solid #222;
+			  margin-top: 20px;
+			}
+			#progressbar {
+			  width: 0px;
+			  height: 24px;
+			  background: #333;
+			}
+		</style>
+	</head>
+
+	<body>  
+	  <form id="upload" enctype="multipart/form-data" action="index.html" method="post">
+        <input name="file" type="file"/>
+        <input type="submit" value="Upload"/>
+      </form>
+
+	    <div id="uploading">
+	      <div id="progress" class="bar">
+	        <div id="progressbar">&nbsp;</div>
+	      </div>
+	    </div>
+		<div id="percents"></div>
+	</body>
+</html>
+
diff --git a/example/upload.html b/example/upload.html
diff --git a/jquery.uploadProgress.js b/jquery.uploadProgress.js
@@ -0,0 +1,64 @@
+/*
+ * jquery.uploadProgress
+ *
+ * Copyright (c) 2008 Piotr Sarnacki (drogomir.com)
+ *
+ * Licensed under the MIT license:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *
+ */
+
+(function($) {
+  $.fn.uploadProgress = function(options) {
+	return this.each(function(){
+		$(this).bind('submit', function() {
+			var uuid = "";
+			for (i = 0; i < 32; i++) { uuid += Math.floor(Math.random() * 16).toString(16); }
+
+			options = $.extend({
+				interval: 2000,
+				progressBar: "#progressbar",
+				progressUrl: "/progress",
+				uuid: uuid,
+				start: function() {},
+				uploading: function() {},
+				complete: function() {},
+                                timer: ""
+			}, options);
+			/* start callback */
+			options.start();
+
+			/* patch the form-action tag to include the progress-id */
+			$(this).attr("action", jQuery(this).attr("action") + "?X-Progress-ID=" + uuid);
+
+			options.timer = window.setInterval(function() { $.uploadProgress(this, options) }, options.interval);
+		});
+	});
+  };
+
+jQuery.uploadProgress = function(e, options) {
+	jQuery.ajax({
+		type: "GET",
+		url: options.progressUrl,
+		dataType: "json",
+		beforeSend: function(xhr) {
+			xhr.setRequestHeader("X-Progress-ID", options.uuid);
+		},
+		success: function(upload) {
+			if (upload.state == 'uploading') {
+				upload = $.extend({
+				  percents: Math.floor((upload.received / upload.size)*1000)/10
+				}, upload);
+              $(options.progressBar).width(Math.floor(upload.percents) + '%');
+			  options.uploading(upload);
+			}
+			/* we are done, stop the interval */
+			if (upload.state == 'done') {
+				window.clearTimeout(options.timer);
+				options.complete(upload);
+			}
+		}
+	});
+};
+
+})(jQuery);