WebUploader上传插件使用说明

罗志环发布于2019-08-20 15:59 / 1511人阅读

摘要：否则强制转换成指定的类型。是否要分片处理大文件上传还有其他配置项上传事件选择需要上传的文件后，文件就会加入文件队列，并触发事件上传进度回调事件，在文件上传中，多次调用此事件当文件上传成功时触发当文件上传出错时触发。

WebUploader简述

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

分片、并发

预览、压缩

多途径添加文件

MD5验证

引入文件

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

需要修改下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文件中书写的结构如下：

选择文件

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


    选择文件

初始化配置项

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

云服务器 GPU云服务器 webuploader文件上传无插件上传 js上传视频插件 js视频上传插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82636.html

WebUploader上传插件使用说明

摘要：否则强制转换成指定的类型。是否要分片处理大文件上传还有其他配置项上传事件选择需要上传的文件后，文件就会加入文件队列，并触发事件上传进度回调事件，在文件上传中，多次调用此事件当文件上传成功时触发当文件上传出错时触发。 WebUploader简述具有两套运行时支持：HTML5与FLASH 分片、并发预览、压缩多途径添加文件 MD5验证引入文件虽然官方没说必须要引入JQuery...

xbynet 2019-08-29 12:27 评论0 收藏0
WebUploader上传插件使用说明

摘要：否则强制转换成指定的类型。是否要分片处理大文件上传还有其他配置项上传事件选择需要上传的文件后，文件就会加入文件队列，并触发事件上传进度回调事件，在文件上传中，多次调用此事件当文件上传成功时触发当文件上传出错时触发。 WebUploader简述具有两套运行时支持：HTML5与FLASH 分片、并发预览、压缩多途径添加文件 MD5验证引入文件虽然官方没说必须要引入JQuery...

20171112 2019-08-01 16:41 评论0 收藏0
webuploader 上传插件上传文件Error “abort”

摘要：怀疑跨域文件没上传完成浏览器被刷新上传文件超过限制大小最终是上传文件超过限制大小，解决需要同时配置下面三个修改如果是，修改参考文章怀疑：跨域文件没上传完成浏览器被刷新上传文件超过限制大小最终是上传文件超过限制大小，解决需要同时配置下面三个： php修改 php.ini -- upload_max_filesize php.ini -- upload_max_...

tanglijun 2019-07-01 12:21 评论0 收藏0
webuploader 上传插件上传文件Error “abort”

摘要：怀疑跨域文件没上传完成浏览器被刷新上传文件超过限制大小最终是上传文件超过限制大小，解决需要同时配置下面三个修改如果是，修改参考文章怀疑：跨域文件没上传完成浏览器被刷新上传文件超过限制大小最终是上传文件超过限制大小，解决需要同时配置下面三个： php修改 php.ini -- upload_max_filesize php.ini -- upload_max_...

qylost 2019-08-20 15:39 评论0 收藏0
webuploader 上传插件上传文件Error “abort”

摘要：怀疑跨域文件没上传完成浏览器被刷新上传文件超过限制大小最终是上传文件超过限制大小，解决需要同时配置下面三个修改如果是，修改参考文章怀疑：跨域文件没上传完成浏览器被刷新上传文件超过限制大小最终是上传文件超过限制大小，解决需要同时配置下面三个： php修改 php.ini -- upload_max_filesize php.ini -- upload_max_...

dantezhao 2019-08-01 16:37 评论0 收藏0