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 相关文章推荐
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
react native与webview通信的示例代码
Sep 25 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
ES6实现图片切换特效代码
Jan 14 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
基于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出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
jquery.pagination.js分页使用教程
2018/10/23 jQuery
JS删除String里某个字符的方法
2021/01/06 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
python实现得到一个给定类的虚函数
2014/09/28 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
python 输出所有大小写字母的方法
2019/01/02 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
flask应用部署到服务器的方法
2019/07/12 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
护理自荐信范文
2013/10/05 职场文书
大学毕业生简单自荐信
2013/11/05 职场文书
服务中心夜班服务员岗位职责
2013/11/27 职场文书
成品仓管员岗位职责
2013/12/11 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
Python机器学习之决策树和随机森林
2021/07/15 Javascript