I am using HTML5 File Api in my application...but my load event is cal before controller giving result in google crome...and when i am running this is mozilla then my progress event not call directly load event cal...this is my code...
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML5NewThumb</title>
<style>
#progressBar
{
height: 14px;
border: 1px solid #cccccc;
display: none;
border-radius:10px;
-moz-border-radius: 10px;
background-image: -moz-linear-gradient(top, #66cc00, #4b9500);
background-image: -webkit-gradient(linear, left top, left bottom, from(#66cc00), to(#4b9500));
}
#drop-area {
height: 50px;
text-align: center;
border: 2px dashed #ddd;
padding: 10px;
margin-bottom: 2em;
}
#drop-area .drop-instructions {
display: block;
height: 30px;
}
#drop-area .drop-over {
display: none;
font-size: 25px;
height: 30px;
}
#drop-area.over {
background: #ffffa2;
border: 2px dashed #000;
}
#drop-area.over .drop-instructions {
display: none;
}
#drop-area.over .drop-over {
display: block;
}
#drop-area.over .drop-over {
display: block;
font-size: 25px;
}
#file-list {
list-style: none;
margin-bottom: 3em;
}
#file-list li {
border-bottom: 1px solid #000;
margin-bottom: 0.5em;
padding-bottom: 0.5em;
}
#file-list li.no-items {
border-bottom: none;
}
#file-list div {
margin-bottom: 0.5em;
}
#file-list li img {
max-width: 200px;
}
#file-list .progress-bar-container {
width: 400px;
height: 10px;
border: 1px solid #555;
margin-bottom: 20px;
}
#file-list .progress-bar-container.uploaded {
height: auto;
border: none;
}
#file-list .progress-bar {
width: 0;
height: 10px;
font-weight: bold;
background: #6787e3;
}
#file-list .progress-bar-container.uploaded .progress-bar{
display: inline-block;
width: auto;
color: #6db508;
background: transparent;
}
#prog1
{
width: 0;
height: 10px;
font-weight: bold;
background: #6787e3;
}
</style>
</head>
<body>
<div role="main">
<section id="main-content">
<form id="form1" enctype="multipart/form-data" method="post" action="@Url.Action("Upload")" >
<input id="fileToUpload1" name="fileToUpload1" type="file" multiple="multiple"/>
<div style="width:500px;">
<div id="prog1"></div>
@*<progress id="prog"></progress>*@
<span id="prognumber"></span>
</div>
<p id="drop-area">
or drag and drop files here
Drop files here!
</p>
<ul id="file-list">
<li class="no-items">(no files uploaded yet)</li>
</ul>
</form>
<script>
(function () {
var filesUpload = document.getElementById("fileToUpload1"),
dropArea = document.getElementById("drop-area"),
fileList = document.getElementById("file-list");
prog12 = document.getElementById("prog1");
prognumber = document.getElementById("prognumber");
function uploadFile(file) {
var li = document.createElement("li"),
div = document.createElement("div"),
img,
reader,
xhr,
fileInfo;
li.appendChild(div);
if (typeof FileReader !== "undefined" && (/image/i).test(file.type)) {
img = document.createElement("img");
li.appendChild(img);
reader = new FileReader();
reader.onload = (function (theImg) {
return function (evt) {
theImg.src = evt.target.result;
};
} (img));
reader.readAsDataURL(file);
}
xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
function uploadProgress(evt) {
if (evt.lengthComputable) {
alert("evt loaded value:" + evt.loaded);
alert("evt total value:" + evt.total);
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
prognumber.innerHTML = percentComplete + '%';
prog12.style.width = (evt.loaded / evt.total) * 100 + "%";
}
}
xhr.upload.addEventListener("load", loadSuccess, false);
function loadSuccess(evt) {
alert("load complete");
prog12.innerHTML = "Uploaded!";
}
xhr.open("POST", "../Home/Upload",true);
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.setRequestHeader("X-File-Name", file.fileName);
xhr.setRequestHeader("X-File-Size", file.fileSize);
xhr.setRequestHeader("X-File-Type", file.type);
xhr.send(file);
fileInfo = "<div>Name: " + file.name + "</div>";
fileInfo += "<div>Size: " + parseInt(file.size / 1024, 10) + " kb</div>";
fileInfo += "<div>Type: " + file.type + "</div>";
div.innerHTML = fileInfo;
fileList.appendChild(li);
}
function traverseFiles(files) {
if (typeof files !== "undefined") {
for (var i = 0, l = files.length; i < l; i++) {
uploadFile(files[i]);
}
}
else {
fileList.innerHTML = "No support for the File API in this web browser";
}
}
filesUpload.addEventListener("change", function () {
traverseFiles(this.files);
}, false);
dropArea.addEventListener("dragleave", function (evt) {
var target = evt.target;
if (target && target === dropArea) {
this.className = "";
}
evt.preventDefault();
evt.stopPropagation();
}, false);
dropArea.addEventListener("dragenter", function (evt) {
this.className = "over";
evt.preventDefault();
evt.stopPropagation();
}, false);
dropArea.addEventListener("dragover", function (evt) {
evt.preventDefault();
evt.stopPropagation();
}, false);
dropArea.addEventListener("drop", function (evt) {
traverseFiles(evt.dataTransfer.files);
this.className = "";
evt.preventDefault();
evt.stopPropagation();
}, false);
})();
</script>
</section>
</div>
</body>
</html>
Controller side
Home Controller
public ActionResult HTML5NewThumb()
{
return View();
}
[HttpPost]
public ActionResult Upload(object fileToUpload1)
{
return Json(false, JsonRequestBehavior.AllowGet);
}