Allow display of labels instead of input tags

Since most browsers don't allow web developers to apply styles to file
inputs, it's common practice to show a styled label and position the
file input off the screen.

This commit allows FileReader to work with such a setup.

e.g. if we had:
```html
<label style="background-color: red; font-color: blue;">
  Click Me!
  <input type="file" style="position: absolute; left: -99999px" />
</label>
```
the user would see and interact with our styled 'Click Me' text, instead
of the default file input.

Author: Alex Kudlick

jquery.FileReader.js

@@ -50,28 +50,36 @@
 	var main = function(el, options) {
 		return el.each(function(i, input) {
 			input = $(input);
-			var id = input.attr('id');
-			if (!id) {
-				id = 'flashFileInput' + inputsCount;
-				input.attr('id', id);
+			var inputId = input.attr('id'),
+			label,
+			clickableElement;
+
+			if (!inputId) {
+				inputId = 'flashFileInput' + inputsCount;
 				inputsCount++;
 			}
+			label = input.parent('label');
+			clickableElement = label.length > 0 ? label : input;
+			clickableElement.attr('id', clickableElement.attr('id') || inputId);
+
+
 			options.multiple = !!(options.multiple === null ? input.attr('multiple') : options.multiple);
 			options.accept = options.accept === null ? input.attr('accept') : options.accept;
 
-			FileAPIProxy.inputs[id] = input;
-			FileAPIProxy.swfObject.add(id, options.multiple, options.accept, options.label, options.extensions);
+			FileAPIProxy.inputs[inputId] = input;
+			FileAPIProxy.swfObject.add(clickableElement.attr('id'), options.multiple, options.accept, options.label, options.extensions);
 
-			input.css('z-index', 0)
+
+			clickableElement.css('z-index', 0)
 				.mouseover(function (e) {
-					if (id !== currentTarget) {
+					if (inputId !== currentTarget) {
 						e = e || window.event;
-						currentTarget = id;
-						FileAPIProxy.swfObject.mouseover(id);
+						currentTarget = inputId;
+						FileAPIProxy.swfObject.mouseover(clickableElement.attr('id'));
 						FileAPIProxy.container
-							.height(input.outerHeight())
-							.width(input.outerWidth())
-							.css(input.offset());
+							.height(clickableElement.outerHeight())
+							.width(clickableElement.outerWidth())
+							.css(clickableElement.offset());
 					}
 				})
 				.click(function(e) {