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在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
javascript获取flash版本号的方法
Nov 20 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
vue和webpack安装命令详解
Jun 15 Javascript
微信小程序实现自定义加载图标功能
Jul 19 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 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
关于手调机和数调机的选择
2021/03/02 无线电
php auth_http类库进行身份效验
2009/03/19 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
深入浅析php json 格式控制
2015/12/24 PHP
php构造函数与析构函数
2016/04/23 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
jQuery 选择器理解
2010/03/16 Javascript
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
几种响应式文字详解
2017/05/19 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
Python设计模式之观察者模式实例
2014/04/26 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
Python requests模块实例用法
2019/02/11 Python
python如何实现视频转代码视频
2019/06/17 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
python实现KNN近邻算法
2020/12/30 Python
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
空中乘务员岗位职责
2014/03/08 职场文书
大学毕业寄语大全
2014/04/10 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers