Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 4a74cc9acc
Fetching contributors…

Cannot retrieve contributors at this time

file 112 lines (92 sloc) 2.9 kb
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>
Something went wrong with that request. Please try again.