本文介绍如何使用WebUploader组件实现视频上传功能。通过修改前端accept配置中的extensions参数，将文件类型限制扩展至mp4、flv等视频格式，并同步调整后端C#代码对文件扩展名的校验逻辑，确保前后端一致支持视频文件上传。
WebUploader视频上传实现概述
此前有人提出需要实现基于WebUploader的视频上传功能，由于时间原因一直未着手，如今抽出时间完成了这个简单的Demo。
视频与图片上传的区别分析
首先探讨上传视频与上传图片是否存在区别？
实际上两者并无本质区别，因为核心操作均为文件上传，因此无需担心上传机制本身的问题。
前端WebUploader配置修改
然而，WebUploader组件默认限制了上传参数的配置，具体表现为对文件扩展名的限制。
我们需要定位到WebUploader JavaScript配置中的accept参数部分。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}在该配置中，只需将原本限制的gif等图片后缀，修改为你需要支持上传的视频格式，例如MP4、AVI等。
后端文件类型验证调整
前端配置修改后，后端服务器端的处理逻辑也需相应调整。
[HttpPost]
public ActionResult upload(HttpPostedFileBase file)
{
if (file != null && file.ContentLength > 0)
{
string folderpath = "/UploadFile/";//上传图片的文件夹
if (!Directory.Exists(folderpath))
{
Directory.CreateDirectory(Server.MapPath(folderpath));
}
string ext1 = Path.GetExtension(file.FileName);
if (ext1 != ".mp4" && ext1 != ".rmvb" && ext1 != ".avi" && ext1 != ".flv")//笔者这儿修改了后缀的判断
{
return Json(new { statu = 201, msg = "文件格式不正确！" });
}
else
{
string name = DateTime.Now.ToString("yyyyMMddHHmmssff");
string ext = Path.GetExtension(file.FileName);
string downpath = folderpath + name + ext;
string filepath = Server.MapPath(folderpath) + name + ext;
file.SaveAs(filepath);
return Json(new { statu = 200, src = downpath, id = name });
}
}
else
{
return Json(new { statu = 202, msg = "请上传文件！" });
}
}请务必记得更新后端对文件类型的判断逻辑，以匹配前端的配置。
完成上述前后端配置后，视频上传功能基本即可正常运行。
前端代码示例与功能扩展
接下来展示前端的具体实现代码。
<tr>
<td>上传视频</td>
<td>
<div id="upl">上传视频</div>//马上这个会用js实例化
</td>
</tr>
<script>
var uploader;
$(function () {
uploader = WebUploader.create({
auto: true,
swf: '/Scripts/Uploader.swf',
server: '@Url.Action("Upload")',//控制器
pick: '#upl',
accept: {
title: 'Images',
extensions: 'mp4,flv,jpeg,bmp,doc,docx,rar,pdf',
}
})
});
</script>从代码中可以看出，WebUploader不仅支持基本的图片和视频上传，还能处理doc文档等其他杂项文件。