WEUI原生以及使用webuploader插件上传方法

直接撸代码

$(function() {
        // 允许上传的图片类型
        var allowTypes = [ 'image/jpg', 'image/jpeg', 'image/png', 'image/gif' ];
        // 1024KB,也就是 1MB
        var maxSize = 1024 * 1024;
        // 图片最大宽度
        var maxWidth = 300;
        // 最大上传图片数量
        var maxCount = 6;
        $('.js_file').on('change', function(event) {
            var files = event.target.files;
            // 如果没有选中文件,直接返回
            if (files.length === 0) {
                return;
            }
            for (var i = 0, len = files.length; i < len; i++) {
                var file = files[i];
                var reader = new FileReader();
                // 如果类型不在允许的类型范围内
                if (allowTypes.indexOf(file.type) === -1) {
                    $.weui.alert({
                        text : '该类型不允许上传'
                    });
                    continue;
                }
                if (file.size > maxSize) {
                    $.weui.alert({
                        text : '图片太大,不允许上传'
                    });
                    continue;
                }
                if ($('.weui_uploader_file').length >= maxCount) {
                    $.weui.alert({
                        text : '最多只能上传' + maxCount + '张图片'
                    });
                    return;
                }
                reader.onload = function(e) {
                    var img = new Image();
                    img.onload = function() {
                        // 不要超出最大宽度
                        var w = Math.min(maxWidth, img.width);
                        // 高度按比例计算
                        var h = img.height * (w / img.width);
                        var canvas = document.createElement('canvas');
                        var ctx = canvas.getContext('2d');
                        // 设置 canvas 的宽度和高度
                        canvas.width = w;
                        canvas.height = h;
                        ctx.drawImage(img, 0, 0, w, h);
                        var base64 = canvas.toDataURL('image/png');

                        // 插入到预览区
                        var $preview = $('<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url('
                                + base64 + ')"><div class="weui-uploader__file-content">0%</div></li>');

                        $('.weui-uploader__files').append($preview);

                        // 然后假装在上传,可以post base64格式,也可以构造blob对象上传,也可以用微信JSSDK上传
                        var progress = 0;
                        function uploading() {
                            $preview.find('.weui-uploader__file-content').text(++progress + '%');
                            if (progress < 100) {
                                setTimeout(uploading, 30);
                            } else {
                                // 如果是失败,塞一个失败图标
                                //$preview.find('.weui-uploader__file-content').html('<i class="weui_icon_warn"></i>');
                                $preview.removeClass('weui-uploader__file_status')
                                        .find('.weui-uploader__file-content')
                                        .remove();
                            }
                        }
                        setTimeout(uploading, 30);
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });
    });

前端

<div class="weui-cells weui-cells_form">
    <form method="post">
        <div class="weui-cells__title">照片</div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <div class="weui-uploader__bd">
                    <ul class="weui-uploader__files"></ul>
                    <div class="weui-uploader__input-box">
                        <input id="uploaderInput" class="weui-uploader__input js_file" type="file" accept="image/*" multiple>
                    </div>
                </div>
            </div>
        </div>
        <div class="weui-btn-area"><a href="javascript:;" class="weui-btn weui-btn_primary">保存</a></div>
    </form>
</div>

来上webuploader的

var uploader = WebUploader.create({
        auto: true,
        swf: '/statics/webuploader-0.1.5/Uploader.swf',
        server: 'upload____url',
        pick: '#imgInput',
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        },
        method: 'POST'
    });
    uploader.on('fileQueued', function(file) {
        var $preview = $('<li id="'+file.id+'" class="weui-uploader__file weui-uploader__file_status"><div class="weui-uploader__file-content">0%</div></li>');
        $('#imgList').append($preview);
        uploader.makeThumb(file, function( error, src) {
            $('#'+file.id).css('background-image','url('+src+')');
        }, 79, 79 );
    });
    uploader.on('uploadProgress', function(file, percentage ) {
        $('#'+file.id).find('.weui-uploader__file-content').html(percentage+'%');
    });
    uploader.on('uploadSuccess', function(file, response) {
        $('#'+file.id).removeClass('weui-uploader__file_status')
                .find('.weui-uploader__file-content')
                .remove();
        // 上传成功,想干点什么就在这里干吧
    });

前端

<div class="weui-cell">
    <div class="weui-cell__bd">
        <div class="weui-uploader__bd">
            <ul class="weui-uploader__files" id="imgList"></ul>
            <div class="weui-uploader__input-box">
                <div id="imgInput" class="weui-uploader__input">选择图片</div>
            </div>
        </div>
    </div>
</div>

我本地使用的

var num=0;
    var uploader = WebUploader.create({
        auto: true,
        swf: '/js/Uploader.swf',
        server: 'upurl',
        pick: '#imgInput',
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        },
        method: 'POST',
        fileNumLimit:9
    });
    uploader.on('fileQueued', function(file) {
        var $preview = $('<li id="'+file.id+'" class="weui-uploader__file weui-uploader__file_status"><div class="weui-uploader__file-content">0%</div></li>');
        $('#imgList').append($preview);
        uploader.makeThumb(file, function( error, src) {
            $('#'+file.id).css('background-image','url('+src+')');
        }, 80, 80 );
    });
    uploader.on('uploadProgress', function(file, percentage ) {
        $('#'+file.id).find('.weui-uploader__file-content').html(percentage.toFixed(1) + '%');
    });
    uploader.on('uploadSuccess', function(file, response) {
        $('#'+file.id).removeClass('weui-uploader__file_status')
                .find('.weui-uploader__file-content')
                .remove();
        // 上传成功,想干点什么就在这里干吧
        $('#'+file.id).append('<input type="hidden" name="file[]" value="'+response.imgid+'"/>');
        num++;
        $("#number").html(num+'/9');
        if(num==9){
            $('.weui-uploader__input-box').hide();
        }
    });
最后修改时间为:2017 年 07 月 13 日 09 时 36 分 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论