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

最新推荐文章于 2023-05-24 11:47:22 发布

weixin_34366546

最新推荐文章于 2023-05-24 11:47:22 发布

阅读量253

点赞数

文章标签： javascript php 移动开发 ViewUI

原文链接：https://segmentfault.com/a/1190000009555622

版权

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

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

<html style="padding-bottom: 54px;">
<head>
    <meta charset="UTF-8">
    <title>Upload</title>
    <link href="css/webuploader.css" rel="stylesheet">
</head>
<body>
<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择文件</div>
    </div>
</div>
<script src="//cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
<script src="js/webuploader.js"></script>
<script src="js/test.js"></script>

</body>
</html>

(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( '<div id="' + file.id + '" class="item">' +
            '<h4 class="info">' + file.name + '</h4>' +
            '<p class="state">等待上传...</p>' +
            '</div>' );
    });
// 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),
            $percent = $li.find('.progress .progress-bar');

        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<div class="progress progress-striped active">' +
                '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                '</div>' +
                '</div>').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真心用得顺风顺水，没遇到什么问题。实在憋不出什么来。

weixin_34366546

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文件上传的几种方法——webuploader篇

本来想把这几种方法放在同一篇写的，写完xhr，已经很长了，想想还是分开的比较好。webuploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。它的兼容性很好，兼容IE6+，IOS6+，Android4+。由于做的系统都要兼容IE8，在用webuploader之前，换过了好...
复制链接

扫一扫