javascript前端实现多视频上传


Posted in Javascript onDecember 13, 2020

本文实例为大家分享了javascript前端实现多视频上传的具体代码,供大家参考,具体内容如下

效果图如下:

javascript前端实现多视频上传

其实拿电视剧来举例子更合适,比如要添加一个电视剧,而这部电视剧有很多集,而如果视频格式是m3u8格式的话,就和我的一样了,就需要同时选中很多个文件,这个时候就需要用到这样类似的功能了。

代码如下:

<style>
.line {
 width: 80%;
 height: 1px;
 border-top: solid RGB(85, 175, 230) 1px;
 margin: 0 auto;
}
</style>

<form enctype="multipart/form-data">
 <div class="class">
 <div class="form-group col-md-12 col-xs-12">
 <label class="col-md-3 col-xs-12">请输入课程名称</label>
 <div class="col-md-9 col-xs-12">
  <input type="text" id="addClassName" class="form-control"
   name="addClassName[]">
 </div>
 </div>
 <div class="form-group col-md-12 col-xs-12">
 <label class="col-md-3 col-xs-12">请选择视频</label>
 <div class="col-md-9 col-xs-12">
  <input onchange="selectVideos(this)" type="file" id="uploadVideos" name="file[]" multiple>
 </div>
 </div>
 
 <div class="form-group col-md-12 col-xs-12">
 <label class="col-md-3 col-xs-12">请输入第几节:</label>
 <div class="col-md-9 col-xs-12">
  <input type="text" class="form-control" name="sort[]"
   placeholder="第1节就输入1"
   required value="">
 </div>
 </div>
 <div class="form-group col-md-12 col-xs-12">
 <div class="line"></div>
 </div>
 </div>
 
 <div class="modal-footer" style="border-top:transparent;">
 <button type="button" class="btn btn-info" onclick="addVideos()" style="margin-right: 700px">添加视频
 </button>
 <button type="button" onclick="addSubmit()" class="btn btn-primary">确认提交</button>
 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
 </div>
</form>

<script>
 var fileCountList = [];
 // 添加视频按钮
 function addVideos() {
 let addDom = "<div class='form-group col-md-12 col-xs-12'><label class='col-md-3 col-xs-12'>请输入课程名称</label><div class='col-md-9 col-xs-12'><input type='text' class='form-control' name='addClassName[]'> </div></div><div class='form-group col-md-12 col-xs-12'><label class='col-md-3 col-xs-12'>请选择视频</label><div class='col-md-9 col-xs-12'> <input type='file' name='file[]' multiple οnchange='selectVideos(this)'></div></div> <div class='form-group col-md-12 col-xs-12'><label class='col-md-3 col-xs-12'>请输入第几节:</label><div class='col-md-9 col-xs-12'><input type='text' class='form-control' name='sort[]' placeholder='第1节就输入1' required></div></div><div class='form-group col-md-12 col-xs-12'><div class='line'></div> </div>";
 $('.class').append(addDom)
 }
 // 获取选择视频的个数(因为目前我写的是上传m3u8文件,所以需要用这个来告诉后端每一集有多少个ts文件,如果是上传mp4文件的话,我猜是不用说明这个的,不过我没有尝试过)
 function selectVideos(obj) {
 let fileCount = obj.files.length;
 fileCountList.push(fileCount);
 }
 // 确认提交按钮
 function addSubmit() {
 // 在使用FormData提交数据的时候,需要用原生的js,不能使用jQuery,如果要使用jQuery获取的话,需要将jQuery获取到的对象转换成原生的DOM节点,具体的可以看我之前的一篇文章
 // 这个时候如果使用console.log(formData)是看不到数据的,但是不要怀疑,按照下面的操作仍然是可以把数据提交上去的
 let formData = new FormData(document.getElementById('uploadVideosForm'));
 // 向formData中添加数据
 formData.append('fileCountList',fileCountList);
 $.ajax({
  url: '上传视频的路径',
  method: 'post',
  processData: false,
  contentType: false,
  dataType: "json",
  data: formData,
  success: function (data) {
 console.log(data)
  }
 })
 }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
js读取并解析JSON类型数据的方法
Nov 14 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
实例详解Node.js 函数
Jun 10 Javascript
node.js实现微信开发之获取用户授权
Mar 18 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
微信小程序点击view动态添加样式过程解析
Jan 21 Javascript
vue使用element-ui实现表单验证
Dec 13 #Vue.js
vue+element实现动态加载表单
Dec 13 #Vue.js
js实现滚动条自动滚动
Dec 13 #Javascript
vue实现两个区域滚动条同步滚动
Dec 13 #Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 #Vue.js
js实现简单的轮播图效果
Dec 13 #Javascript
jquery实现淡入淡出轮播图效果
Dec 13 #jQuery
You might like
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
php基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
用PHP的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
实例讲解python函数式编程
2014/06/09 Python
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
对Python 数组的切片操作详解
2018/07/02 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
在Python中COM口的调用方法
2019/07/03 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
Python原始套接字编程实例解析
2020/01/29 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
安全承诺书范文
2014/03/26 职场文书
安全宣传标语口号
2014/06/06 职场文书
迎国庆演讲稿
2014/09/15 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
捐助感谢信
2015/01/22 职场文书