WebUploader 上传东西其实没啥好说的,
原理更上传图片一样,只不过文件要大一点。
废话就不多说,上代码:
//html
<div id="uploader" class="wu-example">
<!--用来存放文件信息-->
<div id="thelist" class="uploader-list"></div>
<div class="btns">
<div id="picker">选择文件</div>
@*<button id="ctlBtn" class="btn btn-default">开始上传</button>*@
</div>
<video src="" id="VideoSrc2" width="200">
您的浏览器不支持 video 标签。
</video>
<input name="submit" type="button" οnclick="getInfo()" value="获取播放时长" />
</div>
//js代码
_extensions = '3gp,mp4,rmvb,mov,avi,m4v';
_mimeTypes = 'video/*,audio/*,application/*';
//视频详情的js 这里就是那个视频重新写的js 后台没变只是多了一个判断
$(function () {
var $list = $('#thelist');
var state = 'pending';
var thumbnailWidth = 100;
var thumbnailHeight = 100;
var chunkSize = 500 * 1024;
var uniqueFileName = null;
var md5Mark = null;
var uploader = WebUploader.create({
// 选完文件后,是否自动上传。
auto: true,
// swf文件路径
swf: '/components/webuploader/',
// 文件接收服务端。
server: '/Toos/ViedoText?operation=uploadViedo',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
//pick: '.uploadBut',
pick: '#picker',
//限制文件格式
accept: {
title: '视频上传',
extensions: _extensions,
mimeTypes: _mimeTypes
},
fileNumLimit: 1,//文件上传数量限制
threads: 1//上传并发数。允许同时最大上传进程数,为了保证文件上传顺序
// 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
//resize: false
});
// 当有文件被添加进队列的时候
uploader.on('fileQueued', function (file) {
$list.append('<div id="' + file.id + '" class="item">' +
'<h4 id="FilevideoName" class="info">' + file.name + '</h4>' +
'<p class="state">等待上传...</p>' +
'</div>');
});
// 文件上传过程中创建进度条实时显示。
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('上传中');
$percent.css('width', percentage * 100 + '%');
});
uploader.on('uploadSuccess', function (file, response) {
//$( '#'+file.id ).find('p.state').text('已上传');
var data = response;
$("#fileList").show();
if (data == "0")
$('#' + file.id).find('p.state').text('没有获取到文件');
else if (data == "-1")
$('#' + file.id).find('p.state').text('视频不能为空');
else if (data == "-2")
$('#' + file.id).find('p.state').text('视频类型错误');
else if (data == "-3")
$('#' + file.id).find('p.state').text('视频太大');
else if (data == "-4")
$('#' + file.id).find('p.state').text('视频文件名已存在');
else {
$('#' + file.id).find('p.state').text('视频上传成功');
$("#VideoSrc2").get(0).src = data._raw;//视频播放
$('#VideoSrc2').get(0).play();
}
});
uploader.on('uploadError', function (file) {
$('#' + file.id).find('p.state').text('上传出错');
});
uploader.on('uploadComplete', function (file) {
$('#' + file.id).find('.progress').fadeOut();
});
uploader.on('all', function (type) {
if (type === 'startUpload') {
state = 'uploading';
} else if (type === 'stopUpload') {
state = 'paused';
} else if (type === 'uploadFinished') {
state = 'done';
}
if (state === 'uploading') {
$btn.text('暂停上传');
} else {
$btn.text('开始上传');
}
});
})
//点击获取播放时长
var time;
function getInfo(){
var pl = document.getElementById("VideoSrc2");
time = pl.duration;
alert(formatSeconds(time));
}
function formatSeconds(value) {
var theTime = parseInt(value);// 秒
var theTime1 = 0;// 分
var theTime2 = 0;// 小时
if (theTime > 60) {
theTime1 = parseInt(theTime / 60);
theTime = parseInt(theTime % 60);
if (theTime1 > 60) {
theTime2 = parseInt(theTime1 / 60);
theTime1 = parseInt(theTime1 % 60);
}
}
var result = "" + parseInt(theTime) + "秒";
if (theTime1 > 0) {
result = "" + parseInt(theTime1) + "分" + result;
}
if (theTime2 > 0) {
result = "" + parseInt(theTime2) + "小时" + result;
}
return result;
}
//后台代码
public ActionResult ViedoText(string operation)
{
if (operation == "uploadViedo")//上传视频
{
if (Request.Files.Count != 0)
{
HttpPostedFileBase file = Request.Files[0];
string result = SaveUploadCategoriesImg(file);
return Content(result);
}
return Content("0");
}
return HttpNotFound();
}
public static string SaveUploadCategoriesImg(HttpPostedFileBase Video)
{
//判断文件是否为空
if (Video == null)
return "-1";
string fileName = Video.FileName;
string extension = Path.GetExtension(fileName);
//判断文件类型:只能为视频
if (!StringCoreHelper.IsVideoFileName(fileName) || !CommonHelper.IsInArray(extension, ".3gp,.mp4,.rmvb,.mov,.avi,.m4v"))
return "-2";
//判断文件大小
int fileSize = Video.ContentLength;
//if (fileSize > (5242880 * 50))
// return "-3";
//文件保存路径
//string dirPath = @"D:/File/Web/upload/Video/";
//根据虚拟路径,转为物理路径
string newFileName = fileName;
string folder = "~/Video/";
string dirPath = System.Web.Hosting.HostingEnvironment.MapPath(folder);
//分片处理
//string[] sizeList = StringCoreHelper.SplitString(shopConfig.UserAvatarThumbSize);
//判断文件夹是否存在 不存在则创建
if (!Directory.Exists(dirPath))
Directory.CreateDirectory(dirPath);
//保存全路径
string sourcePath = dirPath + newFileName;
//判断文件是否存在
if (Directory.Exists(sourcePath))
return "-4";
Video.SaveAs(sourcePath);
//foreach (string size in sizeList)//分片上传
//{
// string thumbDirPath = string.Format("{0}thumb{1}/", dirPath, size);
// if (!Directory.Exists(thumbDirPath))
// Directory.CreateDirectory(thumbDirPath);
// string[] widthAndHeight = StringCoreHelper.SplitString(size, "_");
// IOHelper.GenerateThumb(sourcePath,
// thumbDirPath + newFileName,
// TypeHelper.StringToInt(widthAndHeight[0]),
// TypeHelper.StringToInt(widthAndHeight[1]),
// "H");
//}
return newFileName;
}