/
index.html
112 lines (92 loc) · 2.83 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>AJAX File Upload Demo</title>
</head>
<body>
<h1>AJAX File Upload Demo</h1>
<p>
This is a demo page for the AJAX File Upload jQuery plugin.<br />
Choose a file below and it will be uploaded without navigating away from this page.
</p>
<form method="post" action="" enctype="multipart/form-data">
<label>File Input: <input type="file" name="file1" id="example1" /></label>
</form>
<script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.ajaxfileupload.js"></script>
<script type="text/javascript">
function applyAjaxFileUpload(element) {
$(element).ajaxfileupload({
debug : true,
action :"upload.php",
onChange: function(file) {
// Create a span element to notify the user of the upload in progress
var span = $("<span />")
.attr("class", $(this).attr("id"))
.text("Uploading")
.insertAfter($(this));
interval = window.setInterval(function() {
var text = span.text();
if (text.length < 13) {
span.text(text + ".");
} else {
span.text("Uploading");
}
}, 200);
},
onSubmit: function(file) {
// Return false here if you want to cancel the upload
//return false;
},
onComplete: function(file, response) {
// Upload complete, replace span with filename, remove button and
// a hidden input containing the filename
window.clearInterval(interval);
var span = $("span." + $(this).attr("id")).text(file + " ");
var input = $("<input />")
.attr({
type: "hidden",
id: $(this).attr("id"),
name: $(this).attr("name"),
value: file
})
.appendTo(span);
if (typeof(response.error) === "string")
{
var fileInput = $("<input />")
.attr({
type: "file",
name: input.attr("name"),
id: input.attr("id")
});
span.replaceWith(fileInput);
applyAjaxFileUpload(fileInput);
alert(response.error);
return;
}
$("<a />")
.attr("href", "#")
.text("x")
.click(function(e) {
var fileInput = $("<input />")
.attr({
type: "file",
name: input.attr("name"),
id: input.attr("id")
});
span.replaceWith(fileInput);
applyAjaxFileUpload(fileInput);
})
.appendTo(span);
}
});
}
$(document).ready(function () {
var interval;
applyAjaxFileUpload("input#example1");
});
</script>
</body>
</html>