Skip to content

Commit 9b22fc1

Browse files
blueimpblueimp
committed
Initial commit.
0 parents  commit 9b22fc1

File tree

8 files changed

+738
-0
lines changed

8 files changed

+738
-0
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store

‎README.txt

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
jQuery File Upload Plugin
2+
=========================
3+
4+
Features
5+
--------
6+
- Plugin for jQuery + jQuery UI (optional).
7+
- Upload multiple files at once.
8+
- Drag & Drop files from the desktop.
9+
- Progress bar indicating the upload progress.
10+
- Possibility to cancel uploads.
11+
- No browser plugins (Adobe Flash, etc.) required.
12+
- Standard HTML5 file upload form.
13+
- Graceful fallback for browsers not supporting HTML5 features.
14+
- Basic file upload works without JavaScript enabled.
15+
- Files are sent as standard "multipart/form-data".
16+
- Works on Google App Engine.
17+
18+
Browser Support (tested versions)
19+
---------------------------------
20+
- Google Chrome - 7.0
21+
- Apple Safari - 5.0
22+
- Mozilla Firefox - 3.6
23+
- Opera - 10.6 -
24+
- Microsoft Internet Explorer 6.0 *
25+
- Microsoft Internet Explorer 7.0 *
26+
- Microsoft Internet Explorer 8.0 *
27+
- Microsoft Internet Explorer 9.0 *
28+
* No support for multiple file selection or upload progress indication.
29+
30+
License
31+
-------
32+
Released under the MIT license:
33+
http://creativecommons.org/licenses/MIT/

‎example/index.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE HTML>
2+
<html lang="en-GB">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery File Upload Example</title>
6+
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css" id="theme">
7+
<link rel="stylesheet" href="../jquery.fileupload-ui.css">
8+
<style>
9+
body {
10+
font-family: Verdana, Arial, sans-serif;
11+
font-size: 13px;
12+
margin: 0;
13+
padding: 20px;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<form class="upload" action="upload.php" method="POST" enctype="multipart/form-data">
19+
<input type="file" name="file" multiple>
20+
<button>Upload</button>
21+
<div>Upload files</div>
22+
</form>
23+
<table class="upload_files"></table>
24+
<table class="download_files"></table>
25+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
26+
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
27+
<script src="../jquery.fileupload.js"></script>
28+
<script src="../jquery.fileupload-ui.js"></script>
29+
<script>
30+
/*global $ */
31+
$(function () {
32+
$('.upload').fileUploadUI({
33+
uploadTable: $('.upload_files'),
34+
downloadTable: $('.download_files'),
35+
buildUploadRow: function (files, index) {
36+
var file = files[index];
37+
return $(
38+
'<tr style="display:none">' +
39+
'<td>' + file.name + '<\/td>' +
40+
'<td class="file_upload_progress"><div><\/div><\/td>' +
41+
'<td class="file_upload_cancel">' +
42+
'<div class="ui-state-default ui-corner-all ui-state-hover" title="Cancel">' +
43+
'<span class="ui-icon ui-icon-cancel"><\/span>' +
44+
'<\/div>' +
45+
'<\/td>' +
46+
'<\/tr>'
47+
);
48+
},
49+
buildDownloadRow: function (file) {
50+
return $(
51+
'<tr style="display:none"><td>' + file.name + '<\/td><\/tr>'
52+
);
53+
}
54+
});
55+
});
56+
</script>
57+
</body>
58+
</html>

‎example/upload.php

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<?php
2+
$file = $_FILES['file'];
3+
echo '{"name":"'.$file['name'].'","type":"'.$file['type'].'","size":"'.$file['size'].'"}';
4+
?>

‎jquery.fileupload-ui.css

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
.file_upload {
2+
position: relative;
3+
overflow: hidden;
4+
direction: ltr;
5+
cursor: pointer;
6+
text-align: center;
7+
color: #333;
8+
font-weight: bold;
9+
-moz-border-radius: 10px;
10+
-webkit-border-radius: 10px;
11+
border-radius: 10px;
12+
width: 200px;
13+
height: 30px;
14+
line-height: 30px;
15+
background: palegreen;
16+
border: 1px solid limegreen;
17+
}
18+
19+
.file_upload_small {
20+
width: 200px;
21+
height: 30px;
22+
line-height: 30px;
23+
font-size: auto;
24+
background: palegreen;
25+
border: 1px solid limegreen;
26+
}
27+
28+
.file_upload_large {
29+
width: 100%;
30+
height: 150px;
31+
line-height: 150px;
32+
font-size: 20px;
33+
background: palegreen;
34+
border: 1px solid limegreen;
35+
}
36+
37+
.file_upload_highlight {
38+
background: lawngreen;
39+
}
40+
41+
.file_upload input {
42+
position: absolute;
43+
top: 0;
44+
right: 0;
45+
margin: 0;
46+
border: none;
47+
font-size: 600px;
48+
opacity: 0;
49+
-ms-filter: 'alpha(opacity=0)';
50+
filter: alpha(opacity=0);
51+
cursor: pointer;
52+
z-index: 2;
53+
}
54+
55+
.file_upload iframe, .file_upload button {
56+
display: none;
57+
}
58+
59+
.file_upload_progress .ui-progressbar-value {
60+
background: url(pbar-ani.gif);
61+
}
62+
63+
.file_upload_progress div {
64+
width: 150px;
65+
height: 15px;
66+
}
67+
68+
.file_upload_cancel div {
69+
cursor: pointer;
70+
}

‎jquery.fileupload-ui.js

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
/*
2+
* jQuery File Upload User Interface Plugin 1.0
3+
*
4+
* Copyright 2010, Sebastian Tschan, AQUANTUM
5+
* Licensed under the MIT license:
6+
* http://creativecommons.org/licenses/MIT/
7+
*
8+
* https://blueimp.net
9+
* http://www.aquantum.de
10+
*/
11+
12+
/*jslint browser: true */
13+
/*global jQuery */
14+
15+
(function ($) {
16+
17+
var UploadHandler = function (dropZone, options) {
18+
if (!options.uploadTable) {
19+
$.error('jQuery.fileUploadUI requires option uploadTable: $(uploadTable)');
20+
}
21+
if (!options.downloadTable) {
22+
$.error('jQuery.fileUploadUI requires option downloadTable: $(downloadTable)');
23+
}
24+
if (typeof options.buildUploadRow !== 'function') {
25+
$.error('jQuery.fileUploadUI requires option buildUploadRow: function (files, index) {return $(row)}');
26+
}
27+
if (typeof options.buildDownloadRow !== 'function') {
28+
$.error('jQuery.fileUploadUI requires option buildDownloadRow: function (json) {return $(row)}');
29+
}
30+
31+
var uploadHandler = this,
32+
dragLeaveTimeout,
33+
isDropZoneEnlarged,
34+
normalizeFiles = function (files) {
35+
var file, i;
36+
for (i = 0; i < files.length; i += 1) {
37+
file = files[i];
38+
if (typeof file === 'string') {
39+
files[i] = {name: file, type: null, size: null};
40+
}
41+
}
42+
return files;
43+
};
44+
45+
this.progressSelector = '.file_upload_progress div';
46+
this.cancelSelector = '.file_upload_cancel div';
47+
this.cssClassSmall = 'file_upload_small';
48+
this.cssClassLarge = 'file_upload_large';
49+
this.cssClassHighlight = 'file_upload_highlight';
50+
this.dropEffect = 'highlight';
51+
52+
this.init = function (files, index, xhr, callBack) {
53+
files = normalizeFiles(files);
54+
var uploadRow = uploadHandler.buildUploadRow(files, index),
55+
progressbar = uploadRow.find(uploadHandler.progressSelector).progressbar({
56+
value: (xhr ? 0 : 100)
57+
});
58+
uploadRow.find(uploadHandler.cancelSelector).click(function () {
59+
if (xhr) {
60+
xhr.abort();
61+
} else {
62+
// javascript:false as iframe src prevents warning popups on HTTPS in IE6
63+
// concat is used here to prevent the "Script URL" JSLint error:
64+
dropZone.find('iframe').attr('src', 'javascript'.concat(':false;'));
65+
uploadRow.fadeOut(function () {
66+
$(this).remove();
67+
});
68+
}
69+
});
70+
uploadRow.appendTo(uploadHandler.uploadTable).fadeIn();
71+
if (typeof uploadHandler.initCallBack === 'function') {
72+
uploadHandler.initCallBack(files, index, xhr, function (settings) {
73+
callBack($.extend(settings, {uploadRow: uploadRow, progressbar: progressbar}));
74+
});
75+
} else {
76+
callBack({uploadRow: uploadRow, progressbar: progressbar});
77+
}
78+
};
79+
80+
this.abort = function (event, files, index, xhr, settings) {
81+
settings.uploadRow.fadeOut(function () {
82+
$(this).remove();
83+
});
84+
};
85+
86+
this.progress = function (event, files, index, xhr, settings) {
87+
settings.progressbar.progressbar(
88+
'value',
89+
parseInt(event.loaded / event.total * 100, 10)
90+
);
91+
};
92+
93+
this.load = function (event, files, index, xhr, settings) {
94+
settings.uploadRow.fadeOut(function () {
95+
$(this).remove();
96+
});
97+
var json;
98+
if (xhr) {
99+
json = $.parseJSON(xhr.responseText);
100+
} else {
101+
json = $.parseJSON($(event.target).contents().text());
102+
}
103+
if (json) {
104+
uploadHandler.buildDownloadRow(json)
105+
.appendTo(uploadHandler.downloadTable).fadeIn();
106+
}
107+
};
108+
109+
this.documentDragEnter = function (event) {
110+
setTimeout(function () {
111+
if (dragLeaveTimeout) {
112+
clearTimeout(dragLeaveTimeout);
113+
}
114+
}, 50);
115+
if (!isDropZoneEnlarged) {
116+
dropZone.switchClass(
117+
uploadHandler.cssClassSmall,
118+
uploadHandler.cssClassLarge
119+
);
120+
isDropZoneEnlarged = true;
121+
}
122+
};
123+
124+
this.documentDragLeave = function (event) {
125+
if (dragLeaveTimeout) {
126+
clearTimeout(dragLeaveTimeout);
127+
}
128+
dragLeaveTimeout = setTimeout(function () {
129+
dropZone.switchClass(
130+
uploadHandler.cssClassLarge,
131+
uploadHandler.cssClassSmall
132+
);
133+
isDropZoneEnlarged = false;
134+
}, 100);
135+
};
136+
137+
this.dragEnter = this.dragLeave = function (event) {
138+
dropZone.toggleClass(uploadHandler.cssClassHighlight);
139+
};
140+
141+
this.drop = function (event) {
142+
dropZone.effect(uploadHandler.dropEffect, function () {
143+
dropZone.removeClass(uploadHandler.cssClassHighlight);
144+
dropZone.switchClass(
145+
uploadHandler.cssClassLarge,
146+
uploadHandler.cssClassSmall
147+
);
148+
});
149+
};
150+
151+
$.extend(this, options);
152+
},
153+
154+
methods = {
155+
init : function (options) {
156+
return this.each(function () {
157+
$(this).fileUpload(new UploadHandler($(this), options));
158+
});
159+
},
160+
161+
destroy : function (namespace) {
162+
return this.each(function () {
163+
$(this).fileUpload('destroy', namespace);
164+
});
165+
}
166+
};
167+
168+
$.fn.fileUploadUI = function (method) {
169+
if (methods[method]) {
170+
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
171+
} else if (typeof method === 'object' || ! method) {
172+
return methods.init.apply(this, arguments);
173+
} else {
174+
$.error('Method ' + method + ' does not exist on jQuery.fileUploadUI');
175+
}
176+
};
177+
178+
}(jQuery));

0 commit comments

Comments
 (0)