js实现带进度条提示的多视频上传功能


Posted in Javascript onDecember 13, 2020

本文实例为大家分享了js带进度条上传多视频的具体代码,供大家参考,具体内容如下

效果:

js实现带进度条提示的多视频上传功能

引用:

<link rel="stylesheet" href="bootstrap.css" >
 <script src="jquery.fileupload.js"></script>
 <script src="http://malsup.github.com/jquery.form.js"></script>

html:

<div class="form-group">
  <label>产品视频:</label>
  <div class="videoUpfile">
  <input type="file" name="avatarVideo" class="avatarVideo"><a class="btn deleteAvatarVideo" href="javascript:;" >删除</a>
  <div class="videoMaterials">
   <div class="progress">
   <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
    <span class="sr-only">0% Complete</span>
   </div>
   </div>
   <div class="files"></div>
   <div class="showimg"></div>
   <input type="hidden" value="" name="video_id[]">
   <p style="color: #b92c28" class="img_upload_info"></p>
  </div>
  </div>
  <div class="videoUpfile">
  <input type="file" name="avatarVideo" class="avatarVideo"><a class="btn deleteAvatarVideo" href="javascript:;" >删除</a>
  <div class="videoMaterials">
   <div class="progress">
   <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
    <span class="sr-only">0% Complete</span>
   </div>
   </div>
   <div class="files"></div>
   <div class="showimg"></div>
   <input type="hidden" value="" name="video_id[]">
   <p style="color: #b92c28" class="img_upload_info"></p>
  </div>
  </div>
</div>

script:

//上传视频

$(".avatarVideo").change(function() {
 var _this = $(this);
 _this.wrap("<form class='fileUploadeVideo' action='/admin/uploadimg/addVideo' method='post' enctype='multipart/form-data'></form>");
 _this.parents('.fileUploadeVideo').ajaxSubmit({
 dataType: 'json',
 beforeSend: function () {
  $(".progress").show();
 },
 uploadProgress: function (event, position, total, percentComplete) {
  var percentVal = percentComplete + '%';
  _this.parents('.videoUpfile').find(".progress-bar").width(percentComplete + '%');
  _this.parents('.videoUpfile').find(".progress-bar").html(percentVal);
  _this.parents('.videoUpfile').find(".sr-only").html(percentComplete + '%');
 },
 success: function (data) {
  if(data.code==100) {
  _this.parents('.videoUpfile').find(".files").html("文件名: " + data.video_title);
  _this.parents('.videoUpfile').find("input[type=hidden]").val(data.video_id);
  alert("上传成功!");
  }else{
  alert("上传失败");
  }
 },
 error: function () {
  alert("上传失败");
 }
 });

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

Javascript 相关文章推荐
基于jquery的修改当前TAB显示标题的代码
Dec 11 Javascript
javascript自执行函数之伪命名空间封装法
Dec 25 Javascript
基于JQUERY的多级联动代码
Jan 24 Javascript
js substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
js 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 Javascript
基于javaScript的this指向总结
Jul 22 #Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 #jQuery
基于LayUI实现前端分页功能的方法
Jul 22 #Javascript
浅谈原型对象的常用开发模式
Jul 22 #Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 #jQuery
JS实现微信摇一摇原理解析
Jul 22 #Javascript
一个简易的js图片轮播效果
Jul 22 #Javascript
You might like
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
jquery 日期分离成年月日的代码
2010/05/14 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
Python pip 常用命令汇总
2020/10/19 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
垃圾回收的优点和原理
2014/05/16 面试题
善意的谎言事例
2014/02/15 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
销售员岗位职责
2015/02/10 职场文书
通讯稿范文
2015/07/22 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
Pandas数据结构之Series的使用
2022/03/31 Python