踩坑视频上传：
点击开始上传：
头部引入webuploader.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/webuploader.css">
</head>
<body>
<div id="uploadfile">
<div id="picker" >选择文件</div>
<!--用来存放文件信息-->
<div id="thelist" class="uploader-list">
<table class="table" border="1" cellpadding="0" cellspacing="0" width="100%">
<tr class="filelist-head">
<th width="5%" class="file-num">序号</th>
<th class="file-name">视频名称</th>
<th class="file-size">大小</th>
<th width="20%" class="file-pro">进度</th>
<th class="file-status">状态</th>
<th width="20%" class="file-manage">操作</th>
</tr>
</table>
</div>
<div id="ctlBtn" class="btn btn-default">开始上传</div>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/webuploader.min.js"></script>
<script>
$(function(){
//视频上传 start
var $list = $('#thelist .table'),
$btn = $('#ctlBtn');
var uploader = WebUploader.create({
resize: false, // 不压缩image     
swf: '../js/uploader.swf', // swf文件路径
server: 'upload.php', // 文件接收服务端。
pick: '#picker', // 选择文件的按钮。可选
chunked: true, //是否要分片处理大文件上传
chunkSize:2*1024*1024, //分片上传，每片2M，默认是5M
// auto: true, //选择文件后是否自动上传
// chunkRetry : 2, //如果某个分片由于网络问题出错，允许自动重传次数
//runtimeOrder: 'html5,flash',
// accept: {
//   title: 'Images',
//   extensions: 'gif,jpg,jpeg,bmp,png',
//   mimeTypes: 'image/*'
// }
duplicate: false //是否支持重复上传
});
    // 当有文件被添加进队列的时候
uploader.on( 'fileQueued', function( file ) {
$list.append('<tr id="'+ file.id +'" class="file-item">'+'<td width="5%" class="file-num">111</td>'+'<td class="file-name">'+ file.name +'</td>'+ '<td width="20%" class="file-size">'+ (file.size/1024/1024).toFixed(1)+'M' +'</td>' +'<td width="20%" class="file-pro">0%</td>'+'<td class="file-status">等待上传</td>'+'<td width="20%" class="file-manage"><a class="stop-btn" href="javascript:;">暂停</a><a class="remove-this" href="javascript:;">取消</a></td>'+'</tr>');
//暂停上传的文件
$list.on('click','.stop-btn',function(){
uploader.stop(true);
})
//删除上传的文件
$list.on('click','.remove-this',function(){
if ($(this).parents(".file-item").attr('id') == file.id) {
uploader.removeFile(file);
$(this).parents(".file-item").remove();
}
})
    });
//重复添加文件
var timer1;
uploader.onError = function(code){
clearTimeout(timer1);
timer1 = setTimeout(function(){
layer.msg('该文件已存在');
},250);
}
    
    // 文件上传过程中创建进度条实时显示
    uploader.on( 'uploadProgress', function( file, percentage ) {
    $("td.file-pro").text("");
        var $li = $( '#'+file.id ).find('.file-pro'),
            $percent = $li.find('.file-progress .progress-bar');
        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<div class="file-progress progress-striped active">' +
              '<div class="progress-bar" role="progressbar" style="width: 0%">' +
              '</div>' +
            '</div>' + '<br/><div class="per">0%</div>').appendTo( $li ).find('.progress-bar');
        }
        $li.siblings('.file-status').text('上传中');
        $li.find('.per').text((percentage * 100).toFixed(2) + '%');
        $percent.css( 'width', percentage * 100 + '%' );
    });
    // 文件上传成功
    uploader.on( 'uploadSuccess', function( file ) {
        $( '#'+file.id ).find('.file-status').text('已上传');
    });
    // 文件上传失败，显示上传出错
    uploader.on( 'uploadError', function( file ) {
        $( '#'+file.id ).find('.file-status').text('上传出错');
    });
    // 完成上传完后将视频添加到视频列表，显示状态为：转码中
uploader.on( 'uploadComplete', function( file ) {
// $( '#'+file.id ).find('.file-progress').fadeOut();
});
    $btn.on('click', function () {
            if ($(this).hasClass('disabled')) {
                return false;
            }
            uploader.upload();
    });   
})
</script>
</body>
</html>
最好是在服务器环境中运行，就能看出效果了
另外关于***文件重复上传***提示，参考http://c7.gg/fw4sn，感觉这个写的很全面了。

webUploader上传视频，包括上传进度、上传状态、暂停和取消等的更多相关文章

  1. ajax 异步上传视频带进度条并提取缩略图

    最近在做一个集富媒体功能于一身的项目.需要上传视频.这里我希望做成异步上传,并且有进度条,响应有状态码,视频连接,缩略图. 服务端响应 { "thumbnail": "/ ...

  2. webuploader实现上传视频

    之前有人让我做一个webuploader上传视频,但是一直没有时间,现在抽出了时间来.来完成以下这个简单的demo 第一步,上传视频和上传 图片有什么区别么? 其实是没有的,因为执行的操作都是上传,所 ...

  3. 百度开源上传组件webuploader 可上传多文件并带有进度条

    //上传多文件 function UploadMultiFile() { var uploader = WebUploader.create({ // 选完文件后,是否自动上传. auto: true ...

  4. mvc实现上传视频预览

    上个项目中用到了上传视频,本来打算用百度的webuploader做的,但是webuploader可能有个毛病就是不能上传太大的东西. 于是乎,只能换个方法做了啊,看了半天最终决定用传统的uploade ...

  5. 对百度WebUploader的二次封装,精简前端代码之图片预览上传(两句代码搞定上传)

    前言 本篇文章上一篇: 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传) 此篇是在上面的基础上扩展出来专门上传图片的控件封装. 首先我们看看效果: 正文 使用方式同 ...

  6. 以springMVC为例获取上传视频文件时长

    毕设项目是一个在线学习系统,教师用户有上传视频的功能,在答辩之前赶了一个demo出来,好多功能都写死了,比如课程学习进度就是被我写死在前端的一个变量,最近导师要我把项目打包发给他,这才心慌慌赶紧把这些 ...

  7. 微信小程序里如何用阿里云上传视频，图片。。

    纯手写,踩了半天多的坑干出来了... 网上也有对于阿里云如何在微信小程序里使用,但是很不全,包括阿里云文档的最佳实践里. 话不多说上代码了. upvideo(){ var aliOssParams = ...

  8. js上传视频（jquery.form.js）

    // 上传目标触发点 <input type="file" class="upvideo" name="upvideo" id=&qu ...

  9. ios 上传视频或图片

    关于iOS如何实现视频和图片的上传, 我们先理清下思路 思路: #1. 如何获取图片? #2. 如何获取视频? #3. 如何把图片存到缓存路径中? #4. 如何把视频存到缓存路径中? #5. 如何上传 ...

随机推荐

  1. Java并发测试

    要求:模拟200个设备,尽量瞬间并发量达到200. 思路 第一种:线程池模拟200个线程——wait等待线程数达200——notifyAll唤醒所有线程 第二种:线程池模拟200个线程——阻塞线程—— ...

  2. JSTL标签库学习记录1-c

    JSTL全称为JSP Standard Tag Library,即JSP标准标签库. 导入JSTL相关的JAR包,jstl.jar standard.jar 导入jstl标签库: <%@tagl ...

  3. Haskell语言学习笔记（57）Parsec（4）

    Parser 类型 data ParsecT s u m a type Parsec s u = ParsecT s u Identity type Parser = Parsec String () ...

  4. delphi修改QQ快捷方式的目标地址达到在启动QQ的同时也能运行自己想要启动的EXE可执行文件

    delphi修改QQ快捷方式的目标地址达到在启动QQ的同时也能运行自己想要启动的EXE可执行文件. 直接上代码,自已体会 !! Unit1.pas代码如下: unit Unit1; interface ...

  5. Linux运维就业技术指导（八）：期中架构考核

    一,期中架构考核概述 1.1 架构图 1.2 架构图公司背景概述 公司是一个新兴的人脸识别高新创业公司,公司名称xxxx 老总是博士生导师,还有一个副总是研究生导师 副总同时是研发总监,负责所有的研发 ...

  6. 大型运输行业实战_day02_1_数据库设计与powerDesigner使用

    1.安装powerDesigner 1. 傻瓜式的安装 2.在安装的过程中选择地区后才可以点击同意和下一步 3.安装地址,建议直接把c改为d 4.其他选项直接下一步 2.使用powerDesigner ...

  7. ElementTree 解析xml（minidom解析xml大文件时，MemoryError）

    在使用minido解析xml文件时,因为文件过大,结果报错MemoryError.查询后得知是因为minidom在解析时是将所有文件放到内存里的,很占用内存,所以要考虑换一种方法来处理xml文件.   ...

  8. wireshark使用相关问题

    问题1: 打开wireshark,没有出现过滤器 解决1: 使用管理员方式登录 过滤: http and ip.src == 192.168.0.10 and ip.dst == 192.168.0. ...

  9. hdoj1114 Piggy-Bank（DP 完全背包）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1114 思路: 题目看着有些绕,其实就是完全背包的变形,需要注意的是这里求最小值,所以需要将dp数组初始 ...

  10. Sorting（好题）

    Sorting https://www.zhixincode.com/contest/21/problem/I?problem_id=324 题目描述 你有一个数列a_1, a_2, \dots, a ...