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'
    // 还有其他配置项
});