<div id="uploader-demo" style="margin-top:15px;">
<!--用来存放item-->
<div id="thelist" class="uploader-list">
</div>
<div>
<div id="filePicker">
选择视频</div>
<button id="ctlBtn" class="btn btn-default" style="position: relative; left: 130px;
top: -39px; height: 40px;">
点击上传</button>
</div>
</div>
$(function () {
var $list = $("#thelist"); //这几个初始化全局的百度文档上没说明,好蛋疼。
var $btn = $("#ctlBtn"); //开始上传
var thumbnailWidth = 100; //缩略图高度和宽度 (单位是像素),当宽高度是0~1的时候,是按照百分比计算,具体可以看api文档
var thumbnailHeight = 100;
var GUID = WebUploader.Base.guid(); //一个GUID
var uploader = WebUploader.create({
// 选完文件后,是否自动上传。
auto: false,
// swf文件路径
swf: '../../../Scripts/webuploader/Uploader.swf',
// 文件接收服务端。
server: '../../../WebServer/DataDictionary/MissionArticles/SavefileuploadVideo.aspx',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#filePicker',
threads: 1,
chunked: true, //开始分片上传
chunkSize: 2048000, //每一片的大小
formData: {
guid: GUID //自定义参数,待会儿解释
},
// 只允许选择图片文件。
accept: {
title: 'Videos',
extensions: 'mp4,avi,mkv',
mimeTypes: 'video/*'
},
method: 'POST'
});
// 当有文件添加进来的时候
uploader.on('fileQueued', function (file) { // webuploader事件.当选择文件后,文件被加载到文件队列中,触发该事件。等效于 uploader.onFileueued = function(file){...} ,类似js的事件定义。
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail">' +
'<img>' +
'<div class="info">' + file.name + '</div>' +
'</div>'
),
$img = $li.find('img');
// $list为容器jQuery实例
$list.append($li);
});
// 文件上传成功,给item添加成功class, 用样式标记上传成功。
uploader.on('uploadSuccess', function (file) {
$('#' + file.id).addClass('upload-state-done');
$.post('../../../WebServer/DataDictionary/MissionArticles/MergeFile.aspx', { guid: uploader.options.formData.guid, fileName: file.name }, function (data) {
Video = file.name;
});
});
$btn.on('click', function () {
console.log("上传...");
uploader.upload();
console.log("上传成功");
alert("上传成功!" + Video);
});
});
先把分完片的文件上传到服务器到临时文件夹中
string fileName = Request["name"];
int index = Convert.ToInt32(Request["chunk"]);//当前分块序号
var guid = Request["guid"];//前端传来的GUID号
string dir = ConfigurationHelper.AppSettings("SavePath", false) + "ArticleVideo\\";
if (!System.IO.Directory.Exists(dir))
{
System.IO.Directory.CreateDirectory(dir);//创建文件夹
}
dir = Path.Combine(dir, guid);//临时保存分块的目录
if (!System.IO.Directory.Exists(dir))
System.IO.Directory.CreateDirectory(dir);
string filePath = Path.Combine(dir, index.ToString());//分块文件名为索引名,更严谨一些可以加上是否存在的判断,防止多线程时并发冲突
var data = Request.Files["file"];//表单中取得分块文件
data.SaveAs(filePath);//报错
Response.Write("200");
合并临时文件夹中的临时文件
string res = "1";
var guid = Request["guid"];//GUID
var uploadDir = ConfigurationHelper.AppSettings("SavePath", false) + "ArticleVideo\\";
var dir = Path.Combine(uploadDir, guid);//临时文件夹
var fileName = Request["fileName"];//文件名
string[] files = null;
if (string.IsNullOrEmpty(fileName))
{
res = "文件名不能为空";
}
if (!System.IO.File.Exists(dir))
{
res = "文件目录不存在";
}
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);//删除文件夹
Response.Write("{\"success\":" + res.ToString().ToLower() + ",\"fileName\":\"" + fileName + "\"}");