前端代码:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="~/Content/dist/css/layui.css" rel="stylesheet" />
<!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
<style>
</style>
</head>
<body>
<div class="layui-form-item">
<label class="layui-form-label">上传视频</label>
<button type="button" class="layui-btn cover" id="control_video_button">上传视频</button>
<button type="button" class="layui-btn layui-btn-danger cover" id="control_video_del" style="display:{$detail.control_video ? 'inline' : 'none'}">删除视频</button>
<input type="hidden" id="control_video" value="{$detail.control_video}" name="control_video" />
<input type="hidden" id="temp_url_id" value="" name="temp_url_id" />
</div>
<div class="layui-form-item">
<label class="layui-form-label"></label>
<div class="layui-input-block">
<video src="{$detail.control_video}" controls="controls" id="control_video_demo" style="width: 50%;display: {$detail.control_video ? 'block' : 'none'}">
您的浏览器不支持 video 标签。
</video>
<p id="demoText"></p>
</div>
</div>
<script src="~/Content/dist/layui.js"></script>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Content/js/address.js"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<script>
layui.use(['upload', 'form'], function () {
var form = layui.form
, $ = layui.jquery
, upload = layui.upload;
var uploadInst = upload.render({
elem: '#control_video_button', //绑定元素
url: "/Community/UploadVedio",//上传接口
accept: 'video'
, bindAction: '#upload' //选完文件后不自动上传
, before: function (obj) {
console.log()
//预读本地文件示例,不支持ie8
obj.preview(function (index, file, result) {
console.log(file)
$('#control_video_demo').attr('src', result); //图片链接(base64)
$('#control_video_demo').css('display', 'block');
$('#control_video_del').css('display', 'inline');
});
},
done: function (res) {
console.log(res);
//如果上传失败
if (res.code != 1) {
return layer.msg('上传失败');
}
//上传成功
document.getElementById("control_video").value = res.filename;
document.getElementById("temp_url_id").value = res.msg;
}, error: function (res) {
console.log(res);
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
});
$('#control_video_del').click(function () {
$('#control_video_demo').css('display', 'none');
$('#control_video_del').css('display', 'none');
$('#control_video').val('');
})
});
</script>
</body>
</html>
后端代码:(这个方法上传视频与图片格式文件通用)
public ActionResult UploadVedio()
{
try
{
var file = Request.Files[0]; //获取选中文件
var filecombin = file.FileName.Split('.');
if (file == null || String.IsNullOrEmpty(file.FileName) || file.ContentLength == 0 || filecombin.Length < 2)
{
return Json(new
{
fileid = 0,
src = "",
name = "",
msg = "上传出错 请检查文件名 或 文件内容"
});
}
//定义本地路径位置
string local = "Upload\\Contract";
string filePathName = string.Empty;
string localPath = Path.Combine(HttpRuntime.AppDomainAppPath, local);
var tmpName = Server.MapPath("~/Upload/Contract/");
var tmp = file.FileName;
var tmpIndex = 0;
//判断是否存在相同文件名的文件 相同累加1继续判断
while (System.IO.File.Exists(tmpName + tmp))
{
tmp = filecombin[0] + "_" + ++tmpIndex + "." + filecombin[1];
}
//不带路径的最终文件名
filePathName = tmp;
if (!System.IO.Directory.Exists(localPath))
System.IO.Directory.CreateDirectory(localPath);
string localURL = Path.Combine(local, filePathName);
file.SaveAs(Path.Combine(localPath, filePathName)); //保存图片(文件夹)
return Json(new
{
src = "/" + localURL.Trim().Replace("\\", "/"),
name = Path.GetFileNameWithoutExtension(file.FileName), // 获取文件名不含后缀名
msg = "上传成功"
});
}
catch {
}
return Json(new
{
src = "",
name = "", // 获取文件名不含后缀名
msg = "上传出错"
});
}