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

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

效果:

引用:

 <link rel="stylesheet" href="bootstrap.css" rel="external nofollow" >
 <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:;" rel="external nofollow" rel="external nofollow" >删除</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:;" rel="external nofollow" rel="external nofollow" >删除</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("上传失败");
    }
  });

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

(0)

相关推荐

  • PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP 5.4以前,实现这样的进度条并不容易,主要有三种方法: 1.使用Flash, Java, ActiveX 2.使用PHP的APC扩展 3.使用HTML5的File API 第一种方法依赖第三方的浏览器插件,通用性不足,且易带来安全隐患.不过由于Flash的使用比较广泛,因此还是有很多网站使用Flash作为解决方案. 第二种方法的不足

  • JS插件plupload.js实现多图上传并显示进度条

    本文实例为大家分享了plupload.js多图上传的具体代码,供大家参考,具体内容如下 HTML代码: <!DOCTYPE html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

  • PHP + plupload.js实现多图上传并显示进度条加删除实例代码

    PHP + plupload.js JS插件实现多图上传并显示进度条加删除实例,废话不多说,直接上代码 HTML代码: <!DOCTYPE html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no&qu

  • js HTML5 Ajax实现文件上传进度条功能

    本文实例介绍了js结合HTML5 Ajax实现文件上传进度条功能,分享给大家供大家参考,具体内容如下 1.  lib.js var Host = window.location.host; //--Cookie function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name +

  • 原生javascript上传图片带进度条【实例分享】

    javascript代码: ; (function(w) { var error = "上传控件不支持您的浏览器!"; // 构造函数 function UploadImg(option) { $u = this; $u.option = option; $u.init($u.option); } UploadImg.prototype = { //初始化 init: function() { var $u = this; //template $u.addupLoader = '&l

  • Node.js实现兼容IE789的文件上传进度条

    Nodejs对文件上传的处理 在Express4里req.files已经是undefined了:现在用的最多的可能就是formidable了,你知道了它有个progress事件,于是心中大喜,低版本IE的进度条有戏了:OK,试一下: form .on('error',function(err){ console.log(err); }) .on('aborted',function(){ console.log('aborted'); }) .on('progress',function(byt

  • 利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层

    大容量文件上传早已不是什么新鲜问题,在.net 2.0时代,HTML5也还没有问世,要实现这样的功能,要么是改web.config,要么是用flash,要么是用一些第三方控件,然而这些解决问题的方法要么很麻烦,比如改配置,要么不稳定,比如文件上G以后,上传要么死掉,要么卡住,通过设置web.config并不能很好的解决这些问题. 这是一个Html5统治浏览器的时代,在这个新的时代,这种问题已被简化并解决,我们可以利用Html5分片上传的技术,那么Plupload则是一个对此技术进行封装的前端脚本

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

    本文实例为大家分享了js带进度条上传多视频的具体代码,供大家参考,具体内容如下 效果: 引用: <link rel="stylesheet" href="bootstrap.css" rel="external nofollow" > <script src="jquery.fileupload.js"></script> <script src="http://malsup

  • vue.js+ElementUI实现进度条提示密码强度效果

    要求一:判断输入的字符串是否包含数字.小写字母.大写字母以及特殊字符四种内容的8-20位字符 通过搜索了解到可以使用?=这个正则语法判断字符串中是否含有多种内容.(?=)这个语法结构在正则里表示"设定后面是"的意思,举下面几个例子进一步了解?=这个语法: (?=.*[a-zA-Z])  这句的意思就是后面必须有一位大写或小写字母 (?=.*[1-9]) 这句的意思是后面必须有一位数字 (?=.*[\W]) 这句的意思是后面必须有一个非字母数字及下划线的特殊符号 (?!.*[\u4E00

  • node.js实现带进度条的多文件上传

    用node.js实现多文件上传并携带进度条的demo,供大家参考,具体内容如下 这个独立封装的需求来自一个朋友公司,他说需要写一个带进度条动画的批量上传文件的组件,结果他们后端跟他说不能多文件上传,我一听就很尴尬了,怎么可能不能多文件呢哈哈,后来我只是告诉他进度条的实现方式,在过了2天后我一直对此事耿耿于怀,所以干脆自己动手用node写了一个多文件上传的demo,并记录下来. 前端: http请求为自己封装的一个原生请求函数,一切以原生代码为主: 后端(nodeJs): express + mu

  • 基于 D3.js 绘制动态进度条的实例详解

    D3 是什么 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的.如果你不知道什么是 JavaScript ,请先学习一下 JavaScript,推荐阮一峰老师的教程. JavaScript 文件的后缀名通常为 .js,故 D3 也常使用 D3.js 称呼.D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度.由于

  • PHP+Ajax无刷新带进度条图片上传示例

    项目需求:1.PHP+Ajax无刷新带进度条图片上传,2.带进度条.所需插件:jquery.js,jquery.form.js. 最近在做一个手机web项目,需要用到Ajax上传功图片能,项目要求PHP无刷新上传图片,并且要带进度条,下面就来讲一下我的实现方法,先看效果图 本示例需要使用的是jquery.js,jquery.form.js,demo里面包含有,你可以在文章下方进行下载. 第一步,建立前端页面index.html 此段是前端展示内容,这里需要说明的是由于input:file标签显示

  • 基于Ajax技术实现文件上传带进度条

    1.概述 在实际的Web应该开发或网站开发过程中,经常需要实现文件上传的功能.在文件上传过程中,经常需要用户进行长时间的等待,为了让用户及时了解上传进度,可以在上传文件的同时,显示文件的上传进度条.运行本实例,如图1所示,访问文件上传页面,单击"浏览"按钮选择要上传的文件,注意文件不能超过50MB,否则系统将给出错误提示.选择完要上传的文件后,单击"提交"按钮,将会上传文件并显示上传进度. 2.技术要点 主要是应用开源的Common-FileUpload组件来实现分

  • jQuery带进度条全屏图片轮播特效代码分享

    本文实例讲述了jQuery带进度条全屏图片轮播特效.分享给大家供大家参考.具体如下: jQuery实现的带进度条转接全屏图片轮播效果是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效代码,实现效果大气,简洁大方 运行效果图:                  -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: link rel="sty

  • Vue实现带进度条的文件拖动上传功能

    1. 基本界面 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1

  • springMVC实现前台带进度条文件上传的示例代码

    项目框架采用spring+hibernate+springMVC如果上传文件不想使用flash那么你可以采用HTML5;截图前段模块是bootstarp框架;不废话直接来代码;spring-mvc配置文件;效果截图如下: 详细实现如下: 1.mvc-config.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/s

  • asp.net mvc 实现文件上传带进度条的思路与方法

    前言 文件上传与下载的操作在实际项目中经常是很重要的一个内容,在使用ASP.NET Web Form的时候我们可以使用诸多的服务器控件,FileIpload就是其中之一,但是在ASP.NET不建议使用那些服务器控件,因为那样违反三层架构原则.最近参考网络资料,学习了ASP.NET MVC如何上传文件. 而这篇文章主要重点是asp.net mvc 实现文件上传带进度条,下面来一起看看吧. 实现思路 ajax异步上传文件,且开始上传文件的时候启动轮询来实时获取文件上传进度.保存进度我采用的是memc

随机推荐