Js上传进度条
Posted zslm___
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Js上传进度条相关的知识，希望对你有一定的参考价值。
http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html
http://www.cnblogs.com/yuanlong1012/p/5127497.html
https://front-js.cc/test/fileupload/
http://www.ruanyifeng.com/blog/2012/08/file_upload.html
1.客户端 upload.cshtml
<!doctype html>
<html>
<head>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(function () {
$(\'#btn\').on(\'click\', function () {
var files = $(\'#file\').get(0).files;
var len = (files.length);
if (len > 0) {
console.log(files[0]);
if (window.FormData) {
var formData = new FormData();
// 建立一个upload表单项，值为上传的文件
formData.append(\'upload\', files[0]);
var xhr = new XMLHttpRequest();
xhr.open(\'POST\', \'/Home/UploadFile\');
// 定义上传完成后的回调函数
xhr.onload = function () {
if (xhr.status === 200) {
console.log(\'上传成功\');
} else {
console.log(\'出错了\');
}
};
xhr.upload.onprogress = function (event) {
if (event.lengthComputable) {
var complete = (event.loaded / event.total * 100 | 0);
var progress = document.getElementById(\'uploadprogress\');
progress.value = progress.innerHTML = complete;
}
};
xhr.send(formData);
}
}
});
});
</script>
</head>
<body>
<input id=\'file\' type=\'file\' />
<button id=\'btn\'>clickme</button>
<progress id="uploadprogress" min="0" max="100" value="0">0</progress>
</body>
</html>
2.服务端代码
/// <summary> /// 上传文件 /// </summary> /// <returns></returns> public ActionResult UploadFile() { if (Request.Files.Count > 0) { Request.Files[0].SaveAs( AppDomain.CurrentDomain.BaseDirectory+"\\\\upload\\\\" + Guid.NewGuid().ToString() ); } return View(); }
/// <summary> /// 上传页面 /// </summary> /// <returns></returns> public ActionResult Upload() { return View("Upload"); }
以上是关于Js上传进度条的主要内容，如果未能解决你的问题，请参考以下文章
自定义对话框片段内的进度条 - 如何从 AsyncTask 传递进度？