2

WebUploader简述

  • 具有两套运行时支持:HTML5FLASH

  • 分片、并发

  • 预览、压缩

  • 多途径添加文件

  • 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容器显示时进行


104828720
1.4k 声望222 粉丝

编程其实很枯燥,所以一定要有追求。