WebUploader上传插件使用说明

WebUploader简述

• 具有两套运行时支持：HTML5与FLASH

• 分片、并发

• 预览、压缩

• 多途径添加文件

• MD5验证

引入文件

• 虽然官方没说必须要引入JQuery库，但实际上需要引入

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">

<!--引入JS-->
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>

<!--SWF在初始化的时候指定，在后面将展示-->

需要修改下webuploader.css

• 需要修改的地方：把.webuploader-pick中的display:inline-block样式去掉

上传分类

• 图片上传：单图上传 多图上传

• 文件上传

Webuploader初始化

• 使用WebUploader.create方法来初始化

var uploader = new WebUploader.Uploader({
    //加载swf文件
    swf: 'path_of_swf/Uploader.swf'

    // 其他配置项
    // 文件接收服务端。
    server: 'http://webuploader.duapp.com/server/fileupload.php',

    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: '#picker',

    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
    resize: false
});

 

HTML结构

• 在HTML文件中书写的结构如下：

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

• 渲染之后得到的HTML结构如下：

<div id="picker" class="webuploader-container">
    <div class="webuploader-pick">选择文件</div>
    <div id="rt_rt_1beac1omvmdp1mvd1ja91oap1pvm1" style="position: absolute; top: 0px; left: 0px; width: 94px; height: 38px; overflow: hidden; bottom: auto; right: auto;">
        <input type="file" capture="camera" name="file" class="webuploader-element-invisible" multiple="multiple">
        <label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label>
    </div>
</div>

 

初始化配置项

var uploader = new WebUploader.Uploader({
    // 加载swf文件
    swf: 'path_of_swf/Uploader.swf'

    // 接收文件的服务端地址。
    server: 'http://webuploader.duapp.com/server/fileupload.php',

    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: '#picker',

    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
    resize: false，
    // 是否自动上传
    auto: true,
    // 指定接受哪些类型的文件
    accept：{
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
    },
    // 配置生成缩略图的选项
    thumb: {
        width: 110,
        height: 110,

        // 图片质量，只有type为`image/jpeg`的时候才有效。
        quality: 70,

        // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
        allowMagnify: true,

        // 是否允许裁剪。
        crop: true,

        // 为空的话则保留原有图片格式。
        // 否则强制转换成指定的类型。
        type: 'image/jpeg'
    },
    // 是否要分片处理大文件上传
    chunked: true,
    method: 'POST'
    // 还有其他配置项
});

 

WebUploader上传事件

• fileQueued
  选择需要上传的文件后，文件就会加入文件队列，并触发fileQueued事件

• uploadProgress
  上传进度回调事件，在文件上传中，多次调用此事件

• uploadSuccess
  当文件上传成功时触发

• uploadError
  当文件上传出错时触发。

• uploadComplete
  不管成功或者失败，文件上传完成时触发。

• error
  如果是3种情况就会触发：
  1、文件数量超出
  2、文件总大小超出
  3、文件类型不满足

• uploadFinished
  当所有文件上传结束时触发

• 上传成功的事件触发顺序
  

• 上传失败的事件触发顺序
  

注意事项

• 当要作为上传控件的html容器一开始是隐藏的话，初始化应该放在html容器显示时进行