1$.ajax({
2 xhr: function() {
3 var xhr = new window.XMLHttpRequest();
4
5 xhr.upload.addEventListener("progress", function(evt) {
6 if (evt.lengthComputable) {
7 var percentComplete = evt.loaded / evt.total;
8 percentComplete = parseInt(percentComplete * 100);
9 console.log(percentComplete);
10
11 if (percentComplete === 100) {
12
13 }
14
15 }
16 }, false);
17
18 return xhr;
19 },
20 url: posturlfile,
21 type: "POST",
22 data: JSON.stringify(fileuploaddata),
23 contentType: "application/json",
24 dataType: "json",
25 success: function(result) {
26 console.log(result);
27 }
28});
29
1$(function() {
2
3 var bar = $('.bar');
4 var percent = $('.percent');
5 var status = $('#status');
6
7 $('form').ajaxForm({
8 beforeSend: function() {
9 status.empty();
10 var percentVal = '0%';
11 bar.width(percentVal);
12 percent.html(percentVal);
13 },
14 uploadProgress: function(event, position, total, percentComplete) {
15 var percentVal = percentComplete + '%';
16 bar.width(percentVal);
17 percent.html(percentVal);
18 },
19 complete: function(xhr) {
20 status.html(xhr.responseText);
21 }
22 });
23});
24
25
26
27
28
29<form action="file-echo2.php" method="post" enctype="multipart/form-data">
30 <input type="file" name="myfile"><br>
31 <input type="submit" value="Upload File to Server">
32</form>
33
34<div class="progress">
35 <div class="bar"></div >
36 <div class="percent">0%</div >
37</div>
38
39<div id="status"></div>
40