@{ Layout = null;
}
<!DOCTYPEhtml>
<html>
<head>
<metaname="viewport"content="width=device-width"/>
<title>Ajax Upload Lab</title>
<style>
.item { background-color: #6699CC; border: 1px solid gray;
font-family: 'Courier New'; font-size: 8.5pt;
margin-bottom: 6px; padding: 3px; color: yellow;
box-shadow: 3px 3px 3px 1px rgba(128, 128, 128, 0.7);
}
.item .name { text-shadow: 1px 1px gray; }
.prg-zone { margin-top: 10px; }
.bar { background-color: #666666;
height: 15px; position: relative;
margin: 3px; margin-top: 6px;
margin-bottom: 6px; border: 1px solid #ccc;
border-top-color: #444; border-left-color: #444;
}
.bar > div { position: absolute; color: white; font-size: 8pt;
}
.bar .color-bar { background-color: #99bb33; top: 0px; bottom: 0px;
left: 0px;
}
.bar .status { top: 0px; left: 6px; } .bar .progress { top: 0px; right: 4px; }</style>
</head>
<body>
<div>
<inputtype="file"id="fileSelector"multiple
data-bind="event: { change: selectorChange }"/><inputtype="button"value="Upload"data-bind="click: upload"/>
</div>
<divdata-bind="foreach: files"class="prg-zone">
<divclass="item">
<divdata-bind="text: name"class="name"></div>
<divclass="bar">
<divclass="color-bar"data-bind="attr: { 'style': widthStyle }"></div><divclass="status"data-bind="text: status"></div>
<divclass="progress"data-bind="text: progress"></div>
</div>
</div>
</div>
<scriptsrc="~/Scripts/jquery-2.1.0.js"></script>
<script src="~/Scripts/knockout-3.1.0.debug.js"></script>
<script>
$(function () {
function viewModel() {var self = this;
self.files = ko.observableArray();
self.selectorChange = function (item, e) { self.files.removeAll();
$.each(e.target.files, function (i, file) {//加入額外屬性
file.uploadedBytes = ko.observable(0); //已上傳Bytes
file.percentage = ko.computed(function () { //上傳百分比return (file.uploadedBytes() * 100 / file.size).toFixed(1);
});
file.widthStyle = ko.computed(function () {return"right:" + (100 - file.percentage()) + "%";
});
//上傳進度數字顯示
file.progress = ko.computed(function () {var perc = file.percentage();
return file.uploadedBytes.peek() + "/" + file.size +
"(" + perc + "%)"; });
file.message = ko.observable();
file.status = ko.computed(function () {var msg = file.message(), perc = file.percentage();
if (msg) return msg;
if (perc == 0) return"Waiting";
elseif (perc == 100) return"Done";
elsereturn"Uploading...";
});
self.files.push(file);
});
};
self.upload = function () { $.each(self.files(), function (i, file) {var reader = new FileReader();
reader.onload = function (e) {var data = e.target.result;
//https://gist.github.com/HenrikJoreteg/2502497
//以XHR上傳原始格式
$.ajax({ type: "POST",
url: "@Url.Content("~/xhr2/upload")" + "?file=" + file.name, contentType: "application/octect-stream",
processData: false, //不做任何處理，只上傳原始資料
data: data,
xhr: function () {//建立XHR時，加掛onprogress事件
var xhr = $.ajaxSettings.xhr();
xhr.upload.onprogress = function (evt) { file.uploadedBytes(evt.loaded);
};
return xhr;
}
});
};
reader.readAsArrayBuffer(file);
});
};
}
var vm = new viewModel();
ko.applyBindings(vm);
});
</script>
</body>
</html>
