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代码
Mar 11 Javascript
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 Javascript
JavaScript入门教程(3) js面向对象
Jan 31 Javascript
xml 封装与解析(javascript和C#中)
Jul 26 Javascript
js 为label标签和div标签赋值的方法
Aug 08 Javascript
js获取所有checkbox的值的简单实例
May 30 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
node.js基础知识小结
Feb 26 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
vue2使用keep-alive缓存多层列表页的方法
Sep 21 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 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
Mysql的常用命令
2006/10/09 PHP
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
php设计模式 Bridge (桥接模式)
2011/06/26 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
jQuery的强大选择器小结
2009/12/27 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
Element Notification通知的实现示例
2020/07/27 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
python如何实现反向迭代
2018/03/20 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
python yield和Generator函数用法详解
2020/02/10 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
Python接收手机短信的代码整理
2020/08/02 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
英国家用电器购物网站:Hughes
2018/02/23 全球购物
大学生求职简历的自我评价
2013/10/14 职场文书
食品业务员岗位职责
2014/03/18 职场文书
自我推荐信格式模板
2015/03/24 职场文书
html5调用摄像头实例代码
2021/06/28 HTML / CSS