1、添加引用
<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="~/Scripts/webuploader-0.1.5/webuploader.css">
<!--引入JS-->
<script type="text/javascript" src="~/Scripts/webuploader-0.1.5/webuploader.js"></script>
2、前端代码
<div>
<h1>简单分片上传支持断点续传</h1>
</div>
<div id="uploader" class="wu-example">
用来存放文件信息
<div id="thelist" class="uploader-list"></div>
<div class="btns">
<div id="btn_SelectFile">选择文件</div>
<input id="btn_StartUpload" type="button" value="开始上传" class="btn btn-default" />
</div>
</div>
<table width="50%" border="1" class="fileList_parent">
<thead>
<tr style="background-color:#DADADA">
<th>文件名称</th>
<th>类型</th>
<th>大小</th>
<th>进度</th>
<th>说明</th>
</tr>
</thead>
<tbody class="fileList">
</tbody>
</table>
3、JS代码
var GUID = WebUploader.Base.guid();//一个GUID
$(function () {
var $ = jQuery;
var $list = $('#thelist');//文件信息
var fileInfo = {};//上传文件记录
var uploader = WebUploader.create({
// 选完文件后,是否自动上传。
auto: false,
// swf文件路径
swf: '/Scripts/webuploader-0.1.5/Uploader.swf',
// 文件接收服务端。
server: '../Home/Upload',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#btn_SelectFile',
//开始分片上传
chunked: true,
//每一片的大小
chunkSize: 2048000,
//自定义参数,待会儿解释
formData: {
guid: GUID
},
// 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
resize: false
});
//设置文件上传数量限制
uploader.on('beforeFileQueued', function (file) {
var fileLength = Object.keys(fileInfo);//文件数量
if (fileLength.length >= 1) {
alert('只允许上传一个文件!!!');
return false;
}
return true;
});
// 当有文件被添加进队列的时候
uploader.on('fileQueued', function (file) {
fileInfo[file.id] = { name: file.name };
var name = file.name; //文件名
//文件类型,获取的是文件的后缀
var fileType = GetFileType(file.name);
//文件大小格式化
var fileSize = GetBytesToSize(file.size);
$list.append(`<div id="${file.id}" class="item"
<h4 class="info">${name}</h4>
<p class="state">等待上传...</p>
</div>`);
var str = `<td><cite title="${name}">${name}</cite></td>
<td>${fileType}</td>
<td>${fileSize}</td>
<td id="jintutiao"><span id="baifenbi"></span>0%</td>
<td id="uploding">等待上传</td>
`;
$(".fileList").html(str)
});
var aa = 1;
// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function (file, percentage) {
var $li = $('#' + file.id),
$percent = $li.find('.progress .progress-bar');
// 避免重复创建
if (!$percent.length) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo($li).find('.progress-bar');
}
$li.find('p.state').text('上传中');
$("#uploding").html("上传中");
$percent.css('width', percentage * 100 + '%');
if (percentage == 1) {
aa++;
}
if (aa <= 2) {
var shuzi = percentage * 100;
$("#baifenbi").html(shuzi.toFixed(2));
}
});
// 文件上传成功,给item添加成功class, 用样式标记上传成功。
uploader.on('uploadSuccess', function (file, response) {
$('#' + file.id).find('p.state').text('已上传');
$.post('/Home/Merge', { guid: GUID, fileName: file.name }, function (data) {
$("#uploader .state").html("上传成功...");
$("#uploding").html("上传成功");
});
});
// 文件上传失败,显示上传出错。
uploader.on('uploadError', function (file) {
$('#' + file.id).find('p.state').text('上传出错');
});
// 完成上传完了,成功或者失败,先删除进度条。
uploader.on('uploadComplete', function (file) {
$('#' + file.id).find('.progress').fadeOut();
});
//所有文件上传完毕
uploader.on("uploadFinished", function () {
//提交表单
});
//开始上传
$("#btn_StartUpload").click(function () {
uploader.upload();
});
});
//字节大小转换,参数为b
function GetBytesToSize(bytes) {
var sizes = ['Bytes', 'KB', 'MB', 'G'];
if (bytes == 0) return 'n/a';
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
};
//通过文件名,返回文件的后缀名
function GetFileType(name) {
var nameArr = name.split(".");
return nameArr[nameArr.length - 1].toLowerCase();
}
4、上传方法实现
#region 文件上传
/// <summary>
/// 分片上传
/// </summary>
/// <returns></returns>
[HttpPost]
public ActionResult Upload()
{
//获取文件名,带后缀
string fileName = Request["name"];
//设置临时存放文件夹名称(不带后缀文件夹名称)
string fileRelName = Path.GetFileNameWithoutExtension(fileName);
//当前分块序号
int index = Convert.ToInt32(Request["chunk"]);
//前端传来的GUID号
var guid = Request["guid"];
//表单中取得分块文件
var data = Request.Files["file"];
//文件上传目录(默认当前项目文件夹下建一个Upload目录)
var dir = Server.MapPath("~/Upload");
//保存临时分块的目录
dir = Path.Combine(dir, fileRelName);
if (!Directory.Exists(dir))
{
Directory.CreateDirectory(dir);
}
//分块文件名为索引名,更严谨一些可以加上是否存在的判断,防止多线程时并发冲突
//(保存分块名称)
string filePath = Path.Combine(dir, index.ToString());
//获取文件扩展名
string extension = Path.GetExtension(data.FileName);
//if (data != null)//为null可能是暂停的那一瞬间
//{
data.SaveAs(filePath + fileName);
//}
return Json(new { erron = 0 });//Demo,随便返回了个值,请勿参考
}
/// <summary>
/// 文件上传完成合并分块文件
/// </summary>
/// <returns></returns>
public ActionResult Merge()
{
var guid = Request["guid"];//GUID
var uploadDir = Server.MapPath("~/Upload");//Upload 文件夹
var fileName = Request["fileName"];//文件名
string fileRelName = Path.GetFileNameWithoutExtension(fileName);
var dir = Path.Combine(uploadDir, fileRelName);//临时文件夹
var files = System.IO.Directory.GetFiles(dir);//获得下面的所有文件
var finalPath = Path.Combine(uploadDir, fileName);//最终的文件名(demo中保存的是它上传时候的文件名,实际操作肯定不能这样)
var fs = new FileStream(finalPath, FileMode.Create);
foreach (var part in files.OrderBy(x => x.Length).ThenBy(x => x))//排一下序,保证从0-N Write
{
var bytes = System.IO.File.ReadAllBytes(part);
fs.Write(bytes, 0, bytes.Length);
bytes = null;
System.IO.File.Delete(part);//删除临时分块
}
fs.Flush();
fs.Close();
System.IO.Directory.Delete(dir);//删除临时文件夹
return Json(new { error = 0 });//随便返回个值,实际中根据需要返回
}
#endregion
选择文件开始上传效果图:
上传成功效果图:
WebUploader资源下载:
WebUploader官网下载
百度网盘下载