using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Web.Controllers
{
using System.IO;
using Newtonsoft.Json;
public class FilesController : Controller
{
// GET: Files
public ActionResult Index()
{
return View();
}
[HttpPost]
public string FileUpload()
{
//获取文件
HttpPostedFileBase file = Request.Files["file"];
//获取一次读多大
int receiveCount = Convert.ToInt32(Request.Headers["getSize"]);
//获取偏移量
int offsetCount= Convert.ToInt32(Request.Headers["offset"]);
if (file != null)
{
string getPath = Server.MapPath("~/img/");
if (!Directory.Exists(getPath))
Directory.CreateDirectory(getPath);
byte[] getBytes = new byte[receiveCount];
int count = 0;
Stream getInputStream = file.InputStream;
//获取文件大小
long size = getInputStream.Length;
using (FileStream fs = new FileStream(getPath + file.FileName, FileMode.OpenOrCreate | FileMode.Append))
{
//从偏移量开始
getInputStream.Seek(offsetCount,SeekOrigin.Current);
while ((count = getInputStream.Read(getBytes, 0, receiveCount)) != 0)
{
fs.Write(getBytes,0,count);
FileData fd = new FileData();
fd.TotalCount = size;
fd.HasReadCount = offsetCount + count;
fd.Path = "/img/" + file.FileName;
return JsonConvert.SerializeObject(fd);
}
}
}
return null;
}
}
public class FileData
{
/// <summary>
/// 文件总大小
/// </summary>
public long TotalCount { get; set; }
/// <summary>
/// 已读大小
/// </summary>
public int HasReadCount { get; set; }
/// <summary>
/// 路径
/// </summary>
public string Path { get; set; }
}
}
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Content/jquery-3.1.1.js"></script>
<script src="~/Content/jquery.form.js"></script>
<style>
#showPrecess{
background: #0026ff;
0px;
height:30px;
}
</style>
</head>
<body>
<div>
<form id="form0">
<p>
<input type="file" name="file" multiple />
<img src="" id="ShowImg" width="100" height="100" />
<div id="Precess" style="200px;float:left;border:1px solid #ccc;" >
<div id="showPrecess">
</div>
<span style="200px;float:left;" id="showNumber" ></span>
</div>
<input type="button" value="上传" onclick="GetFile()" />
<input type="button" value="暂停" onclick="pause()" />
<input type="button" value="继续" onclick="goon()" />
</p>
</form>
</div>
</body>
</html>
<script>
var totalCount = 0;//总大小
var offsetCount = 0;//偏移量
var receiveState = true;//状态
$(function () {
$("input[name=file]").change(function () {
var getFile = $("input[name=file]")[0].files[0];
var getBlog = window.URL.createObjectURL(getFile);
$("#ShowImg").attr("src", getBlog);
})
})
function GetFile() {
totalCount = 0;
offsetCount = 0;
$("#showPrecess").css("width", "0%");
upload();
}
function upload() {
var getFile = $("input[name=file]")[0].files[0];
var formData = new FormData();
formData.append("file", getFile);
$.ajax({
url: "/Files/FileUpload",
data: formData,
contentType: false,
processData: false,
cache: false,
type: 'POST',
dataType:"json",
headers: {
offset: offsetCount,
getSize:200
},
success: function (d) {
console.log(d);
totalCount = d.TotalCount;
offsetCount = d.HasReadCount;
$("#showPrecess").css("width", (offsetCount / totalCount)*100+"%");
$("#showNumber").html(((offsetCount / totalCount) *100).toFixed(2)+"%");
if (totalCount - offsetCount > 0) {
if (receiveState) {
upload();
}
}
}
})
}
function pause() {
receiveState = false;
}
function goon() {
receiveState = true;
upload();
}
</script>