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 相关文章推荐
JavaScript 原型与继承说明
Jun 09 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
React BootStrap用户体验框架快速上手
Mar 06 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
微信小程序实现日历小功能
Nov 18 Javascript
vue 页面跳转的实现方式
Jan 12 Vue.js
基于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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
php 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
Javasipt:操作radio标签详解
2013/12/30 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
python中的闭包函数
2018/02/09 Python
python3转换code128条形码的方法
2019/04/17 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
机电一体化自荐信
2013/12/10 职场文书
个人求职信范文分享
2014/01/06 职场文书
党支部换届选举方案
2014/05/08 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
家长学校教学计划
2015/01/19 职场文书
小学六年级毕业感言
2015/07/30 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
python实现简单的名片管理系统
2021/04/26 Python
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers
python+opencv实现目标跟踪过程
2022/06/21 Python