125 lines
2.7 KiB
HTML
125 lines
2.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<!-- saved from url=(0044)http://malsup.com/jquery/form/progress2.html -->
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
|
||
|
|
<title>File Upload Progress Demo #2</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
padding: 30px
|
||
|
|
}
|
||
|
|
|
||
|
|
form {
|
||
|
|
display: block;
|
||
|
|
margin: 20px auto;
|
||
|
|
background: #eee;
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 15px
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress {
|
||
|
|
position: relative;
|
||
|
|
width: 400px;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
padding: 1px;
|
||
|
|
border-radius: 3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bar {
|
||
|
|
background-color: #B4F5B4;
|
||
|
|
width: 0%;
|
||
|
|
height: 20px;
|
||
|
|
border-radius: 3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.percent {
|
||
|
|
position: absolute;
|
||
|
|
display: inline-block;
|
||
|
|
top: 3px;
|
||
|
|
left: 48%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>File Upload Progress Demo #2</h1>
|
||
|
|
<code><input type="file" name="myfile[]" multiple></code>
|
||
|
|
<div id="form1">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="progress">
|
||
|
|
<div class="bar"></div>
|
||
|
|
<div class="percent">0%</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="status"></div>
|
||
|
|
|
||
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
|
||
|
|
<script src="http://malsup.github.com/jquery.form.js"></script>
|
||
|
|
<script>
|
||
|
|
$("div#form1")
|
||
|
|
.append(
|
||
|
|
// Creating Form Div and Adding <h2> and <p> Paragraph Tag in it.
|
||
|
|
$("<form/>", {
|
||
|
|
action : 'index.php?entryPoint=uploadAjaxFile',
|
||
|
|
method : 'POST',
|
||
|
|
enctype : "multipart/form-data"
|
||
|
|
}).append(
|
||
|
|
// Create <form> Tag and Appending in HTML Div form1.
|
||
|
|
$("<input/>", {
|
||
|
|
type : 'file',
|
||
|
|
id : 'myfile[]',
|
||
|
|
name : 'name',
|
||
|
|
multiple : ''
|
||
|
|
}), // Creating Input Element With Attribute.
|
||
|
|
$("<br/>"), $("<input/>", {
|
||
|
|
type : 'submit',
|
||
|
|
id : 'submit',
|
||
|
|
value : 'Submit'
|
||
|
|
})));
|
||
|
|
$(document)
|
||
|
|
.ready(
|
||
|
|
function() {
|
||
|
|
|
||
|
|
(function() {
|
||
|
|
|
||
|
|
var bar = $('.bar');
|
||
|
|
var percent = $('.percent');
|
||
|
|
var status = $('#status');
|
||
|
|
|
||
|
|
$('form').ajaxForm(
|
||
|
|
{
|
||
|
|
beforeSend : function() {
|
||
|
|
status.empty();
|
||
|
|
var percentVal = '0%';
|
||
|
|
bar.width(percentVal)
|
||
|
|
percent.html(percentVal);
|
||
|
|
},
|
||
|
|
uploadProgress : function(event, position, total,
|
||
|
|
percentComplete) {
|
||
|
|
var percentVal = percentComplete + '%';
|
||
|
|
bar.width(percentVal)
|
||
|
|
percent.html(percentVal);
|
||
|
|
//console.log(percentVal, position, total);
|
||
|
|
},
|
||
|
|
success : function() {
|
||
|
|
var percentVal = '100%';
|
||
|
|
bar.width(percentVal)
|
||
|
|
percent.html(percentVal);
|
||
|
|
},
|
||
|
|
complete : function(xhr) {
|
||
|
|
status.html(xhr.responseText);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
})();
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<script src="http://www.google-analytics.com/urchin.js"
|
||
|
|
type="text/javascript"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
_uacct = "UA-850242-2";
|
||
|
|
urchinTracker();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|