• 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. jxl.jar下载

    jxl.jar是通过java操作excel表格的工具类库,是由java语言开发而成的. 在网上找了很多,不是链接失效,就是csdn上要钱的,所以干脆上传个到自己的博客文件里,方便你们下载. 下载地址: ...

  2. 1+x 证书 Web 前端开发中级理论考试（试卷 8 ）含答案

    1+x 证书 Web 前端开发中级理论考试(试卷 8 ) 官方QQ群 转载请注明来源:妙笔生花个人博客http://blog.zh66.club/index.php/archives/438/ 一.单 ...

  3. Web安全测试学习笔记-DVWA-存储型XSS

    XSS(Cross-Site Scripting)大致分为反射型和存储型两种,之前对XSS的认知仅停留在如果网站输入框没有屏蔽类似<script>alert('ok')</scrip ...

  4. Springboot关于tomcat容器配置、三大组件配置、拦截器配置

    原文地址:http://www.javayihao.top/detail/172 1.tomcat配置 Springboot默认使用的就是嵌入式servlet容器即tomcat,对于web项目,如果使 ...

  5. 浏览器及Windows常用快捷键汇总

    浏览器常用快捷键: F5 刷新 Ctrl+N 打开新窗口 Ctrl+T 打开新标签 Ctrl +  O  打开浏览器的时候打开文件 Ctrl+Shift+N 隐身模式打开窗口 F2 F3 切换  Ct ...

  6. 转：C# String为值类型还是引用类型

    关于String为值类型还是引用类型的讨论一直没有平息,最近一直在研究性能方面的问题,今天再次将此问题进行一次明确.希望能给大家带来点帮助,如果有错误请指出. 来看下面例子: //值类型 int a ...

  7. 发布方式一：发布.netcore流程

    通过注册世纪互联,发布网站 注册需要上传身份证正反照片,以及打款一元,试用期一个月 https://www.azure.cn     注册完成后,进入主页面: 如图所示,创建完成后的效果: 点开详情, ...

  8. Add an Item to the Navigation Control 将项目添加到导航控件

    In this lesson, you will learn how to add an item to the navigation control. For this purpose, the N ...

  9. 洗牌算法及 random 中 shuffle 方法和 sample 方法浅析

    对于算法书买了一本又一本却没一本读完超过 10%,Leetcode 刷题从来没坚持超过 3 天的我来说,算法能力真的是渣渣.但是,今天决定写一篇跟算法有关的文章.起因是读了吴师兄的文章<扫雷与算 ...

  10. ES6-Symbol的用法 ，symbol在对象中的应用，改变值

    ES6-Symbol的用法,,symbol在对象中的应用,改变值 let a = new String; let b = new Number; let c = new Boolean; let d ...