• webUploader的使用记录

  • WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。
    采用大文件分片并发上传，极大的提高了文件上传效率。

  • 引入资源,使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF。

<!--引入CSS-->

<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">

<!--引入JS-->

<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>
<div id="uploader" class="wu-example">

    <!--用来存放文件信息-->

    <div id="thelist" class="uploader-list"></div>

    <div class="btns">

        <div id="picker">选择文件</div>

        <button id="ctlBtn" class="btn btn-default">开始上传</button>

    </div>

</div>

初始化Web Uploader

var uploader = WebUploader.create({

    auto: true,// 选完文件后，是否自动上传。

    swf: './js/webuploader-0.1.5/Uploader.swf',// swf文件路径

    server: 'http://receive.com/v1/book/upload',// 文件接收服务端。

    dnd: '.upload-container',

    pick: '#picker',// 内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id

    multiple: true, // 选择多个

    chunked: true,// 开起分片上传。

    threads: 5, // 上传并发数。允许同时最大上传进程数。

    method: 'POST', // 文件上传方式，POST或者GET。

    fileSizeLimit: 1024*1024*100*10, //验证文件总大小是否超出限制, 超出则不允许加入队列。

    fileSingleSizeLimit: 1024*1024*100, //验证单个文件大小是否超出限制, 超出则不允许加入队列。

    fileVal:'epub', // [默认值：'file'] 设置文件上传域的name。

});

添加文件到队列时

uploader.on( 'fileQueued', function( file ) {

    // 选中文件时要做的事情，比如在页面中显示选中的文件并添加到文件列表，获取文件的大小，文件类型等

    console.log(file.ext) // 获取文件的后缀

    console.log(file.size) // 获取文件的大小

    console.log(file);

});

文件上传过程中创建进度条实时显示。

uploader.on( 'uploadProgress', function( file, percentage ) {

    console.log(percentage * 100 + '%');

});

上传成功时触发的

uploader.on( 'uploadSuccess', function( file,response ) {

    console.log(file.id+"传输成功");

});

上传失败时触发的

 uploader.on( 'uploadError', function( file ) {

     console.log(file);

     console.log(file.id+'upload error')

 });
    取消上传
$('.upload-list').on('click', '.btn-remove', function(){

    // 从文件队列中删除某个文件id

    file_id = $(this).data('id');

    uploader.removeFile(file_id, true); // 从队列中删除

    // console.log(uploader.getFiles()) // 队列显示还在  其实已经删除

});
    重试上传，重试指定文件，或者从出错的文件开始重新上传。
$('.upload-list').on('click', '.upload-item__progress span', function(){

    uploader.retry($(this).data('file'));

});
    上传完成
uploader.on( 'uploadComplete', function( file ) {

    console.log(uploader.getFiles());

});
    一个简陋的demo
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>webuploader</title>

</head>

<!--引入CSS-->

<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/webuploader/0.1.1/webuploader.css">

<style>

    #upload-container, #upload-list{width: 500px; margin: 0 auto; }

    #upload-container{cursor: pointer; border-radius: 15px; background: #EEEFFF; height: 200px;}

    #upload-list{height: 800px; border: 1px solid #EEE; border-radius: 5px; margin-top: 10px; padding: 10px 20px;}

    #upload-container>span{widows: 100%; text-align: center; color: gray; display: block; padding-top: 15%;}

    .upload-item{margin-top: 5px; padding-bottom: 5px; border-bottom: 1px dashed gray;}

    .percentage{height: 5px; background: green;}

    .btn-delete, .btn-retry{cursor: pointer; color: gray;}

    .btn-delete:hover{color: orange;}

    .btn-retry:hover{color: green;}

</style>

<!--引入JS-->

<body>

    <div id="upload-container">

        <span>点击或将文件拖拽至此上传</span>

    </div>

    <div id="upload-list">

        <!-- <div class="upload-item">

            <span>文件名：123</span>

            <span data-file_id="" class="btn-delete">删除</span>

            <span data-file_id="" class="btn-retry">重试</span>

            <div class="percentage"></div>

        </div> -->

    </div>

    <button id="picker" style="display: none;">点击上传文件</button>

</body>

<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

<script src="https://cdn.bootcss.com/webuploader/0.1.1/webuploader.js"></script>

<script>

    $('#upload-container').click(function(event) {

        $("#picker").find('input').click();

    });

    var uploader = WebUploader.create({

        auto: true,// 选完文件后，是否自动上传。

        swf: 'https://cdn.bootcss.com/webuploader/0.1.1/Uploader.swf',// swf文件路径

        server: 'http://www.test.com/zyb.php',// 文件接收服务端。

        dnd: '#upload-container',

        pick: '#picker',// 内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id

        multiple: true, // 选择多个

        chunked: true,// 开起分片上传。

        threads: 5, // 上传并发数。允许同时最大上传进程数。

        method: 'POST', // 文件上传方式，POST或者GET。

        fileSizeLimit: 1024*1024*100*100, //验证文件总大小是否超出限制, 超出则不允许加入队列。

        fileSingleSizeLimit: 1024*1024*100, //验证单个文件大小是否超出限制, 超出则不允许加入队列。

        fileVal:'upload', // [默认值：'file'] 设置文件上传域的name。

    });

    uploader.on('fileQueued', function(file) {

        // 选中文件时要做的事情，比如在页面中显示选中的文件并添加到文件列表，获取文件的大小，文件类型等

        console.log(file.ext) // 获取文件的后缀

        console.log(file.size) // 获取文件的大小

        console.log(file.name);

        var html = '<div class="upload-item"><span>文件名：'+file.name+'</span><span data-file_id="'+file.id+'" class="btn-delete">删除</span><span data-file_id="'+file.id+'" class="btn-retry">重试</span><div class="percentage '+file.id+'" style="width: 0%;"></div></div>';

        $('#upload-list').append(html);

    });

    uploader.on('uploadProgress', function(file, percentage) {

        console.log(percentage * 100 + '%');

        var width = $('.upload-item').width();

        $('.'+file.id).width(width*percentage);

    });

    uploader.on('uploadSuccess', function(file, response) {

        console.log(file.id+"传输成功");

    });

    uploader.on('uploadError', function(file) {

        console.log(file);

        console.log(file.id+'upload error')

    });

    $('#upload-list').on('click', '.upload-item .btn-delete', function() {

        // 从文件队列中删除某个文件id

        file_id = $(this).data('file_id');

        // uploader.removeFile(file_id); // 标记文件状态为已取消

        uploader.removeFile(file_id, true); // 从queue中删除

        console.log(uploader.getFiles());

    });

    $('#upload-list').on('click', '.btn-retry', function() {

        uploader.retry($(this).data('file_id'));

    });

    uploader.on('uploadComplete', function(file) {

        console.log(uploader.getFiles());

    });

</script>

</html>

webUploader的使用的更多相关文章

  1. Asp.Net Mvc 使用WebUploader 多图片上传

    来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...

  2. 百度 flash html5自切换 多文件异步上传控件webuploader基本用法

    双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name=& ...

  3. 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传)

    前言 首先声明一下,我这个是对WebUploader开源上传控件的二次封装,底层还是WebUploader实现的,只是为了更简洁的使用他而已. 下面先介绍一下WebUploader 简介: WebUp ...

  4. webuploader上传文件，图片

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.官方地址:http://fex.baidu.com/webupload ...

  5. webuploader 谷歌浏览器跨域

    今天在本地调试webuploader 的image-upload demo时遇到跨域问题(本地post数据到同事的机器中) 会出现No 'Access-Control-Allow-Origin' he ...

  6. 三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)

    涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...

  7. webuploader在IE8/9下上传遇到的两个问题

    最近在做图片上传功能. 点击一个按钮,弹出一个iframe,它是百度的webuploader插件 在点击关闭按钮时,IE9下总是会报错: __flash__removeCallback未定义错误 解决 ...

  8. 用百度webuploader分片上传大文件

    一般在做文件上传的时候,都是通过客户端把要上传的文件上传到服务器,此时上传的文件都在服务器内存,如果上传的是视频等大文件,那么服务器内存就很紧张,而且一般我们都是用flash或者html5做异步上传, ...

  9. mvc实现上传图片(上传和预览)webuploader

    笔者看到mvc最近比较流行,而很多使用一些比较旧的的方法上传图片,再次安利一下百度的webuploader控件吧 webuploader第一步要先下载一些插件这点可以在webuploader官网上下载 ...

  10. WebUploader UEditor chrome 点击上传文件选择框会延迟几秒才会显示 反应很慢

    chrome52.0.2743.80以上, accept: { title: 'Images', extensions: 'jpg,jpeg,png', mimeTypes: 'image/*' } ...

随机推荐

  1. redhat 6.5 更换yum源

    新安装了redhat6.5.安装后,登录系统,使用yum update 更新系统.提示: Loaded plugins: product-id, security, subscription-mana ...

  2. C# 执行 cmd 命令, 不显示任何窗口

    代码如下: 调用的命令:reg export exportPath registryKey -y Process proc = new Process(); proc.StartInfo.FileNa ...

  3. 2017 经典的CVPR 关于ImageCaptioning论文

    1.        SCA-CNN: Spatial and Channel-wise Attention in Convolutional Networks for Image Captioning ...

  4. 11. Go 语言网络编程

    Go 语言网络编程 Go语言在编写 web 应用方面非常得力.因为目前它还没有 GUI(Graphic User Interface 图形化用户界面)的框架,通过文本或者模板展现的 html 界面是目 ...

  5. RocketMQ 升级到主从切换(DLedger、多副本)实战

    目录 1.RocketMQ DLedger 多副本即主从切换核心配置参数详解 2.搭建主从同步环境 3.主从同步集群升级到DLedger 3.1 部署架构 3.2 升级步骤 3.3 验证消息发送与消息 ...

  6. css实现左右两个div等高

    提出问题: 现在有两个div,但是两个div里面内容多少不确定,可能左边多,可能右边多,css要如何设置可以保证左右两边的div等高呢? 解决方案: 每个div使用display:table-cell ...

  7. Winform中使用DevExpress的CheckEdit控件实现多选条件搜索

    场景 Winform控件-DevExpress18下载安装注册以及在VS中使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1 ...

  8. Android studio将一个项目作为module导入另一个项目

    有两个Android项目,一个为pozhudl,一个为app,现在欲将pozhudl项目作为module导入到app中,并调用pozhudl项目中的类 先在pozhudl项目的build.gradle ...

  9. python中线程 进程 协程

    多线程:#线程的并发是利用cpu上下文的切换(是并发,不是并行)#多线程执行的顺序是无序的#多线程共享全局变量#线程是继承在进程里的,没有进程就没有线程#GIL全局解释器锁#只要在进行耗时的IO操作的 ...

  10. hadoop节点动态删除与增加

    动态删除 1)修改配置文件 修改hdfs-site.xml文件,适当减小dfs.replication的数量,增加dfs.hosts.exclude选项 vi hdfs-site.xml <pr ...