JavaScript中使用webuploader实现上传视频功能(demo)


Posted in Javascript onApril 10, 2017

之前有人让我做一个webuploader上传视频,但是一直没有时间,现在抽出了时间来。来完成以下这个简单的demo

第一步,上传视频和上传 图片有什么区别么?

其实是没有的,因为执行的操作都是上传,所以说我们并不用担心上传的问题。

但是webuploader实际上是限制了你上传的参数(这里指的是限制了你的文件扩展名)

我们找到webuploader中的js参数accept中的extensions

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>

这里面大家也看到了uploader不仅仅可以上传一些最基本的图片视频而且还能上传一些doc文档等杂七杂八的东西啊

Javascript 相关文章推荐
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
js密码强度检测
Jan 07 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
深入理解Vuex 模块化(module)
Sep 26 Javascript
ReactNative中使用Redux架构总结
Dec 15 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
Mar 02 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
如何在JavaScript中正确处理变量
Dec 25 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 #Javascript
vue.js单页面应用实例的简单实现
Apr 10 #Javascript
javascript内存分配原理实例分析
Apr 10 #Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 #Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 #Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 #Javascript
Vue2递归组件实现树形菜单
Apr 10 #Javascript
You might like
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
Python实现多线程HTTP下载器示例
2017/02/11 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
python实现dijkstra最短路由算法
2019/01/17 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
python交易记录整合交易类详解
2019/07/03 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
Pycharm中import torch报错的快速解决方法
2020/03/05 Python
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
大学自荐信
2013/12/12 职场文书
采购部主管岗位职责
2014/01/01 职场文书
两只小狮子教学反思
2014/02/05 职场文书
新教师岗前培训方案
2014/06/05 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
护士自我推荐信范文
2015/03/24 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js