文件上传的几种方法——webuploader篇

Amos 发布于2019-08-20 16:49 / 2469人阅读

摘要：本来想把这几种方法放在同一篇写的，写完，已经很长了，想想还是分开的比较好。是由团队开发的一个简单的以为主为辅的现代文件上传组件。因为是，就拿着的来用一下选择文件的按钮。也可以重写上传事件。如果不自动上传的话，可以通过触发。

本来想把这几种方法放在同一篇写的，写完xhr，已经很长了，想想还是分开的比较好。
webuploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。它的兼容性很好，兼容IE6+，IOS6+，Android4+。由于做的系统都要兼容IE8，在用webuploader之前，换过了好几个组件，都无法满足需求，比如uploadify无法在header里面添加token（需求其实很简单，不能随便拿个组件来用，我嘛很绝望）话说，其实一开始就有试着用webuploader，但是由于某网站上的demo里面的js文件有问题，会报错（当时项目赶啊，着急啊，就放弃了，后面问了一下狮虎，狮虎也是用webuploader，我就跑官网去下载，就可以了！）果然还是官网靠谱！顺便提一下，用webuploader这个项目，文件上传是上传到自己的服务器，不是上传七牛。

先上代码，这个代码是用在项目里面之前，写的一个小demo，参数不齐全。。。（webuploader使用起来很简单，api也很详细，去官网看一下就可以上手了）

(function () {
    var uploader = WebUploader.create({

        // swf文件路径
        swf: "js/Uploader.swf",

        // 文件接收服务端。
        server: "uploadify.php", // 因为是demo，就拿着uploadify的php来用一下

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

        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false,
        auto: true,
        headers: {"userName": "emi", "token": "123456"}
    });
// 当有文件被添加进队列的时候，添加到页面预览
    uploader.on( "fileQueued", function( file ) {
        $("#thelist").append( "" +
            "" + file.name + "" +
            "等待上传..." +
            "" );
    });
// 文件上传过程中创建进度条实时显示。
    uploader.on( "uploadProgress", function( file, percentage ) {
        var $li = $( "#"+file.id ),
            $percent = $li.find(".progress .progress-bar");

        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $("" +
                "" +
                "" +
                "").appendTo( $li ).find(".progress-bar");
        }

        $li.find("p.state").text("上传中");

        $percent.css( "width", percentage * 100 + "%" );
    });
    uploader.on( "uploadSuccess", function( file ) {
        $( "#"+file.id ).find("p.state").text("已上传");
    });

    uploader.on( "uploadError", function( file ) {
        $( "#"+file.id ).find("p.state").text("上传出错");
    });

    uploader.on( "uploadComplete", function( file ) {
        $( "#"+file.id ).find(".progress").fadeOut();
    });
})();

项目过程中，我也遇到了一个很普遍的问题（虽然上面代码里面没有这个参数，这个参数是指定接受哪些类型的文件），就是文件夹打开特别慢，网上找了一下

accept: {
  title: "Images",
  extensions: "jpg,jpeg,png",
  mimeTypes: "image/*"
}

改成这样就可以了，亲测有效~

accept: {
  title: "Images",
  extensions: "jpg,jpeg,png",
  mimeTypes: "image/jpg,image/jpeg,image/png"   //修改位置
}

可以通过upload对象改参数值，比如uploader.options.server = "服务器路径"。也可以重写上传事件。

如果不自动上传的话，可以通过upoloader.upload()触发。

感觉webuploader真心用得顺风顺水，没遇到什么问题。实在憋不出什么来。

GPU云服务器云服务器 js缓存的几种方法 webuploader文件上传最基本的几种 html的几种轮播

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

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

文件上传的几种方法——plupload篇

摘要：然鹅，因为是要上传到七牛，遇到了跨域的问题，尝试过网上的几种解决方法，都没用。一开始以为是一下子上传太多张的缘故，就把改为，然鹅还是会报错。。。其实用这个组件之前，原先是想接着用webuploader的，毕竟用过了，比较熟悉，而且也很好用。然鹅，因为是要上传到七牛，遇到了跨域的问题，尝试过网上的几种解决方法，都没用。只好用七牛文档里面的plupload，hhhhhh，官方文档推荐的，...

mingzhong 2019-08-20 16:49 评论0 收藏0
在Vue项目中使用WebUploader实现文件上传

摘要：简介是由团队开发的一个简单的以为主，为辅的现代文件上传组件。采用大文件分片并发上传，极大的提高了文件上传效率。另外分片传输能够更加实时的跟踪上传进度。选择文件的按钮。简介：WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的...

mindwind 2019-08-02 15:35 评论0 收藏0
在Vue项目中使用WebUploader实现文件上传

摘要：简介是由团队开发的一个简单的以为主，为辅的现代文件上传组件。采用大文件分片并发上传，极大的提高了文件上传效率。另外分片传输能够更加实时的跟踪上传进度。选择文件的按钮。简介：WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的...

endiat 2019-08-26 10:14 评论0 收藏0
在Vue项目中使用WebUploader实现文件上传

摘要：简介是由团队开发的一个简单的以为主，为辅的现代文件上传组件。采用大文件分片并发上传，极大的提高了文件上传效率。另外分片传输能够更加实时的跟踪上传进度。选择文件的按钮。简介：WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的...

funnyZhang 2019-08-30 11:27 评论0 收藏0
WebUploader上传插件使用说明

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

xbynet 2019-08-29 12:27 评论0 收藏0