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 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
javascript正则表达式基础知识入门
Apr 20 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 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中取得image按钮传递的name值
2006/10/09 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
PHP输出日历表代码实例
2015/03/27 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
Python 实现微信自动回复的方法
2020/09/11 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
药学专业学生的自我评价分享
2014/02/06 职场文书
领导干部廉政承诺书
2014/03/27 职场文书
对孩子的寄语
2014/04/09 职场文书
党员创先争优活动总结
2014/05/04 职场文书
运动员获奖感言
2014/08/15 职场文书
食品安全汇报材料
2014/08/18 职场文书
活动宣传稿范文
2015/07/23 职场文书