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 相关文章推荐
avalonjs制作响应式瀑布流特效
May 06 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
20行JS代码实现网页刮刮乐效果
Jun 23 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
使用Typescript和ES模块发布Node模块的方法
May 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
图解上海144收音机
2021/03/02 无线电
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
php封装的smarty类完整实例
2016/10/19 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
Python之Web框架Django项目搭建全过程
2017/05/02 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
python之语音识别speech模块
2020/09/09 Python
python中PyQuery库用法分享
2021/01/15 Python
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
北京申奥口号
2014/06/19 职场文书
房屋出售授权委托书
2014/10/12 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
鲁迅故居导游词
2015/02/05 职场文书
中英文求职信范文
2015/03/19 职场文书
防汛通知
2015/04/25 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python