Hi Guys,
Today I will tell you how to upload multiple files using progressbars and webserivces. Below is the code I have used.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Courses</title>
<script src="js/jquery-1.11.3.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<style>
.pt10 {
padding-top: 10px;
}
.pb10 {
padding-bottom: 10px;
}
.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
-ms-filter: 'alpha(opacity=0)';
direction: ltr;
width: 150px;
cursor: pointer;
}
.fileinput-button {
position: relative;
}
progress::-moz-progress-bar {
background: green;
}
progress::-webkit-progress-value {
background: green;
}
progress {
color: green;
}
</style>
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<div class="container">
<div>
<h4>Course Code : <span id="coursecode"></span></h4>
<h4>TotalMarks : <span id="totalmarks"></span></h4>
<h4>Term : <span id="term"></span></h4>
<hr />
</div>
<div class="col-md-12 col-sd-12 col-xs-12">
<div id="testimg" class="col-md-6 col-sd-6 col-sm-12 col-xs-12">
</div>
<div id="submitform" class="col-md-6 col-sd-6 col-sm-12 col-xs-12">
<div class="pt10">
<input type="hidden" id="assignmentid" />
<input type="hidden" id="assignmentnumber" />
<input type="hidden" id="regnumber" />
<input type="hidden" id="code" />
<!--<div class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<input type="file" name="images" id="images" multiple>
<span>Add files...</span>
</div>-->
<div class="btn btn-success fileinput-button pt10">
<i class="glyphicon glyphicon-plus"></i>
<input type="file" name="images" id="images" accept=".jpg, .png, .jpeg, .gif, .bmp, .tif, .tiff|images/*" multiple />
<span>Select files...</span>
</div>
<div>
<h5>To select multiple files, hold down the CTRL or SHIFT key while selecting files.</h5>
</div>
<div class="files pt10">
</div>
<!--<button class="btn btn-info" onclick="submitform();">Submit</button>-->
</div>
</div>
</div>
</div>
<script type="text/javascript">
var spath = 'http://localhost:121231/testwebservice.svc';
var s1path = 'http://localhost:64383/api/upload';
var regno = '12X2323232';
$(document).ready(function () {
var coursecode = getParameterByName("code");
loadassignment(coursecode);
});
function loadassignment(coursecode) {
$.get(spath + '/GetOnlineAssignment/' + coursecode, function (data) {
$("#assignmentid").val(data[0].ID);
$("#assignmentnumber").val(data[0].AssignmentNumber);
$("#regnumber").val(regno);
$("#code").val(data[0].CourseCode);
$("#coursecode").text(data[0].CourseCode);
$("#totalmarks").text(data[0].TotalMarks);
$("#term").text(data[0].TermId);
def(data[0].ID);
});
}
//load assignment picture
function def(id) {
var html = "";
var Obj = new Object();
Obj.Id = id;
$.ajax({
type: "Get",
contentType: "application/json; charset=utf-8",
url: s1path + "/GetAssignmentQuestion",
dataType: "json",
data: Obj,
success: function (data1) {
console.log(data1);
if (data1.d == undefined) {
}
else {
data1 = data1.d;
}
if (data1.length > 0) {
if (data1[0].Message == "No Record Found") {
}
else {
html += "<img class='img-responsive' src='" + data1[0].File + "'>"
}
$("#testimg").html(html);
}
else {
}
},
error: function (result) {
}
});
}
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
$('#images').on('change', function () {
var images = document.getElementById('images');
var length = images.files.length;
for (i = 0; i < length; i++) {
//
if (images.files[i].size < 2048000) {
send(i);
} else {
//
alert('The file length exceeded 2MB size.');
}
}
});
var counter = 0, processed = false, pg = 0;
function send(i) {
var images = document.getElementById('images');
var length = images.files.length;
var image = images.files[i];
var formData = new FormData();
formData.append('QuestionId', '1');
formData.append('AnswerNo', '1');
formData.append('EntryBy', '2103242342');
formData.append('coursecode', 'DEG101');
formData.append('image', image);
var h = '<div id="r' + (counter) + '"><progress id="progressBar' + (counter) + '" value="0" max="100" style="width: 300px"></progress><h5 id="status' + (counter) + '"></h5><p id="loaded_n_total' + (counter) + '"></p></div>';
$(".files").append(h);
counter++;
var xhr = new window.XMLHttpRequest();
xhr.open("POST", s1path + "/SaveAssignment");
//Upload progress
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
if (!processed) {
var prog = Math.ceil(evt.loaded / evt.total) * 100;
$("#loaded_n_total" + i).html("Uplodaed " + evt.loaded + " bytes of " + evt.total);
$("#progressBar" + i).val(Math.round(prog));
$("#status" + i).html(images.files[i].name + " <b>" + Math.round(prog) + "</b> % uploaded");
//Do something with upload progress
console.log(prog + ' % completed.');
console.log('loaded ' + evt.loaded + ' of ' + evt.total);
} else {
var prog = Math.ceil(evt.loaded / evt.total) * 100;
$("#loaded_n_total" + (pg)).html("Uplodaed " + evt.loaded + " bytes of " + evt.total);
$("#progressBar" + (pg)).val(Math.round(prog));
$("#status" + (pg)).html(images.files[i].name + " <b>" + Math.round(prog) + "</b> % uploaded");
}
}
}, false);
//after complete make things ok
xhr.upload.addEventListener("loadend", function () {
$("#status" + pg).html("<strong class='text-success'>" + images.files[i].name + " <i class='glyphicon glyphicon-ok'></i></strong>");
$("#loaded_n_total" + pg).html("Uplodaed Successfully");
$("#progressBar" + (pg)).val(100);
if ((i + 1) == length) {
processed = true;
}
pg++;
}, false);
xhr.send(formData);
return xhr;
}
</script>
</body>
</html>
Thanks
Ritesh