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 相关文章推荐
JS代码格式化和语法着色V2
Oct 14 Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
vue选项卡切换登录方式小案例
Sep 27 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
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
PHP 采集心得技巧
2009/05/15 PHP
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
使用php清除bom示例
2014/03/03 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
页面实时更新时间的JS实例代码
2013/12/18 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
Python通过正则表达式选取callback的方法
2015/07/18 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
python 生成器协程运算实例
2017/09/04 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
Python语法分析之字符串格式化
2019/06/13 Python
python操作gitlab API过程解析
2019/12/27 Python
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
EJB的基本架构
2016/09/22 面试题
有创意的广告词
2014/03/18 职场文书
用Python实现Newton插值法
2021/04/17 Python
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB