文件上传的几种要领——webuploader篇

原本想把这几种方法放在统一篇写的,写完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至心用得顺风顺水,没碰到什么题目。着实憋不出什么来。

    原文作者:ermaoL
    原文地址: https://segmentfault.com/a/1190000009555622
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞