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 相关文章推荐
JS代码格式化和语法着色V2
Oct 14 Javascript
读jQuery之十 事件模块概述
Jun 27 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
javaScript之split与join的区别(详解)
Nov 08 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
layer 关闭指定弹出层的例子
Sep 25 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 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
php获取数组中重复数据的两种方法
2013/06/28 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
php判断linux下程序问题实例
2015/07/09 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
详解javascript遍历方式
2015/11/11 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
python控制台显示时钟的示例
2014/02/24 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
Django 视图层(view)的使用
2018/11/09 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
Python处理PDF与CDF实例
2020/02/26 Python
keras.layer.input()用法说明
2020/06/16 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
美国网上花店:JustFlowers
2017/02/12 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
业务员简历自我评价
2014/03/06 职场文书
投资建议书模板
2014/05/12 职场文书
同学聚会策划方案
2014/06/06 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python
浅谈react useEffect闭包的坑
2021/06/08 Javascript