标签:功能 label http webconfig date 过程 context mat ide
<div class="form-group"> <label>上传视频:</label> <div class="my-upload"> <div class=""> <input type="file" id="fileupload" name="fileupload" class="" /> </div> </div> </div> <div style="padding-top: 30px; padding-left: 283px;"> <video src="@Html.ValueFor(c => c.VedioLink)" id="vediofile" style="width:400px;height:250px;" controls="controls"> </video> </div> @Html.HiddenFor(c => c.VedioLink, new { @id = "vedio" }) <span style="margin-left: 20%;" id="progress" >上传进度:0%</span>
<script> //上传视频 $(‘input[name=fileupload]‘).change(function () { //console.log("in it"); layer.msg(‘上传视频中...请不要关闭或刷新页面...‘) var formData = new FormData($("#uploadForm")[0]); var xhr = new XMLHttpRequest(); var url = "/Console/UploadVedio/Indexs"; xhr.open("POST", url, true); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); var returndata = eval("(" + xhr.responseText + ")"); console.log(returndata.datas); if (returndata.status == 1) { layer.msg(returndata.msg); } else { layer.msg(returndata.msg); $("#vediofile").attr(‘src‘, returndata.datas) $("#vediofile2").attr(‘src‘, returndata.datas) $("#vedio").val(returndata.datas); } } }; //进度条部分 xhr.upload.onprogress = function (evt) { if (evt.lengthComputable) { var percentComplete = Math.round(evt.loaded * 100 / evt.total); if (percentComplete==100) { document.getElementById(‘progress‘).innerHTML = "上传进度完成!正在进行保存操作,提示上传成功之前,请不要关闭和刷新页面!"; } else { document.getElementById(‘progress‘).innerHTML = "上传进度:" + percentComplete + "%"; } } }; xhr.send(formData); }); </script>
这里使用了XMLHttpRequest 进行视频的上传
使用 XMLHttpRequest .upload.onprogress 显示上传进度
后台的接收代码
[HttpPost] public ActionResult Indexs(FormCollection collection) { HttpPostedFileBase file = HttpContext.Request.Files[0]; if (file != null) { if (file.FileName.Length > 2 && fileName.ToLower().IndexOf(".mp4") < 0) { return WriteError("请上传.MP4格式的视频"); } } string fileName = GetFileName(file.FileName);// GetFileName(); string saveName = DateTime.Now.ToString("yyyyMMddHHmmssffff") + fileName; string playFile = Server.MapPath(PublicMethod.upFile + saveName); string upFileName = PublicMethod.upFile + saveName; //上传视频到本地 file.SaveAs(playFile); //将视频上传到七牛 qiniufun.PutFile(qiniufun.qnSpace, qiniufun.fullname(upFileName), Server.MapPath(upFileName)); } public string GetFileName(string fileName) { int i = fileName.LastIndexOf("\\") + 1; string Name = fileName.Substring(i); return Name; }
上传到七牛过程中发生如下问题
1.使用普通上传方式只能上传文件大小于100M以内的视频
说到这个问题要吐槽一下七牛的sdk ,在nuget下载下来的dll和官方文档上面的示例代码方法名和方法很多都对不上。
2.上传的视频无法在PC端和手机端同时播放正常
对于上面的这个问题七牛有个小技巧可以查看视频的编码
http://7xo9nf.com2.z0.glb.qiniucdn.com/test.mp4?avinfo//视频地址+?avinfo
解决方案:使用格式工厂将视频的编码改成AVC(H262) 或者ACV(H264)编码即可
好了解决上述问题之后发现把代码发布到iis环境代码又有如下问题
1.MP4格式的文件iis无法识别
添加视频的mime类型即可 .mp4 video/mp4
2.上传文件夹访问权限问题
3.iis 上传文件大小限制
选中网站主页-》请求筛选-》编辑功能设置-》设置允许最大内容长度
4.请求的时间限制
webconfig设置还有XMLHttpRequest 设置
标签:功能 label http webconfig date 过程 context mat ide
原文地址:http://www.cnblogs.com/chongyao/p/6644970.html