Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Tree: 4a74cc9acc
Fetching contributors…

Cannot retrieve contributors at this time

113 lines (92 sloc) 2.9 kB
<!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>
Jump to Line
Something went wrong with that request. Please try again.