记录下 今天的研究笔记。
前端页面
@{ ViewBag.Title = "Home Page"; }
<style type="text/css">
.main { padding: 20px 28px; margin: 0 auto; }
.progressNum { text-align: center; font-size: 12px; font-family: 'microsoft yahei'; color: #000; }
.progress { height: 22px; margin-bottom: 22px; overflow: hidden; background-color: #e4eaec; border-radius: 3px; -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1); box-shadow: inset 0 1px 2px rgba(0,0,0,.1); }
.progress-bar { float: left; width: 0; height: 100%; font-size: 12px; line-height: 22px; color: #fff; text-align: center; background-color: #62a8ea; -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); -webkit-transition: width .6s ease; -o-transition: width .6s ease; transition: width .6s ease; }
.progress-bar-striped, .progress-striped .progress-bar { background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); -webkit-background-size: 40px 40px; background-size: 40px 40px; }
.progress-bar.active, .progress.active .progress-bar { -webkit-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite;
}
</style>
<div class="jumbotron">
<input type="file" id="upload" onchange="validate(this)" />
<div id="process"> </div>
<br />
<div id="v"></div>
</div>
<script>
function validate(t)
{
//debugger;
var objt = $('#upload');
var obj = objt[0].files[0];
if (obj == undefined) {
layer.msg("请选择上传图片!", { icon: 2 });
return;
}
var formData = new FormData();
formData.append("img", obj);
$.ajax({
type: "post",
url: "/Home/UploadImage",
data: formData,
processData: false, // 使数据不做处理
contentType: false, // 不要设置Content-Type请求头
xhr: function () {
//获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
//检查upload属性是否存在
//绑定progress事件的回调函数
myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
}
return myXhr;
//xhr对象返回给jQuery使用
},
success: function (data) {
console.log(data);
if (data.msg != "") {
$("#v").html("<video <video width=750 controls=''><source src='/files/" + data.filepath +"' type='video/mp4'></video>");
} else {
alert(data.msg);
}
}
})}
function progressHandlingFunction(e) {
var curr = e.loaded;
var total = e.total;
process = curr / total * 100;
process = process.toFixed(2);
var str = '<div class="main">\
<div class="progress">\
<div class="progress-bar progress-bar-striped active" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: '+ process+'%" role="progressbar">\
</div>\
</div>\
完成进度:<span id="progressNum">'+ process+'% </span>\
</div>';
$("#process").html('').html(str);
if (process >= 100) {
setTimeout(function () {
$("#process").html('');
}, 2300)
}
}
</script>
后端代码
using System;
using System.IO;
using System.Linq;
using System.Threading;
using System.Web;
using System.Web.Mvc;
namespace upload.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult UploadImage()
{
HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
var postFile = files[0];
if (postFile.ContentLength == 0) {
return Json(new { msg="上传文件为空"},JsonRequestBehavior.AllowGet);
}
try {
string format = SaveFile(postFile);
return Json(new { msg = "上传成功",filepath= format }, JsonRequestBehavior.AllowGet);
} catch (Exception ex) {
return Json(new { msg = "上传失败" }, JsonRequestBehavior.AllowGet);
}
}
private string SaveFile(HttpPostedFile file) {
string path = @"H:\uploadBig\upload\upload\Files"; string retMsg = DateTime.Now.ToString("yyyyMMddHHmmss") + "." + file.FileName.Split('.').Last();
FileStream fs = new FileStream(path + "\\"+retMsg, FileMode.Create);
BinaryWriter bw = new BinaryWriter(fs);
BinaryReader br = new BinaryReader(file.InputStream);
int totalCount = file.ContentLength;
byte[] bufferByte;
int size = 102400;
int readCount = 0;//单次读取的字节数
// int readCount = (int)Math.Ceiling((double)(fileLength / size )) 第二种分块方式
while (readCount < totalCount) {
bufferByte = new byte[size];
bufferByte = br.ReadBytes(size);
readCount += size;
bw.Write(bufferByte, 0, bufferByte.Length);//写入字节到文件流
bw.Flush(); //写入缓存 用于拓展 可注释
HttpContext.Cache.Insert("Admin_UploadSpeed_", (readCount * 100.0 / totalCount).ToString("0.00"), null, DateTime.Now.AddSeconds(1), System.Web.Caching.Cache.NoSlidingExpiration); //后台监听写入进度 可注释 System.IO.File.AppendAllText(path + "/1.txt", (readCount * 1.0 / totalCount).ToString("0.00")+System.Environment.NewLine);
}
bw.Close();
bw.Dispose();
return retMsg;
}
}
}
关于大文件上传的设置 需要开启：
1.修改IIS的applicationhost.config
文件位置： %windir%\system32\inetsrv\config\applicationhost.config
ctrl+F 找到 requestFiltering 节点，该节点下默认没有requestLimits 元素。
为这个节点添加如下元素：(上传的大小将改为2G)
<requestLimits maxAllowedContentLength="2147483647" />
- 1
2.发布后需要在网站目录下修改web.config中添加如下内容：
在web.config 的configuration节点下加上
<system.webServer> <security> <requestFiltering> <requestLimits maxAllowedContentLength="2147483647"/> </requestFiltering> </security> </system.webServer>
效果粗糙了些:
拓展处 后期通过分块读取的思想
1.做成多线程处理（提高服务器端的接收速度）
2.分块读写 做成 redis根据用户存储 写分块文件名 下次传同文件可实现断点续传。
今天的笔记就先做到这里。。。
