没有哪种教育能及得上逆境 [登录·注册]

吕滔博客

首页 开发 运维 工具 摄影

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

开发 memory 发布于July 13, 2017 标签: PHP

直接撸代码

$(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();
        }
    });

相关推荐

添加新评论

网站状态

  • 栏目分类:49个
  • 发布文章:1541篇
  • 用户评论:787条
  • 开博至今:4191天

正则速查

[abc] 匹配中括号中的单个字符,如a或b或c
[^abc] 匹配除了a、b、c等字符的其他单个字符
[a-z] 匹配一个字符范围,如a到z
[a-zA-Z] 匹配一个字符范围,如a-z 或 A-Z
^ 匹配行的开始
$ 匹配行的结束
\A 匹配一个字符串的开始
\z 匹配一个字符串的结束
. 匹配任意单个字符
\s 匹配空白字符,如空格,TAB
\S 匹配非空白字符
\d 匹配一个数字
\D 匹配非数字
\w 匹配一个字母
\W 匹配非字母
\b 匹配字符边界
(...) 引用所有括号中的内容
(a|b) a或者b
a? 零个或1个a
a* 零个或多个a
a+ 1个或多个a
a{3} 3次重复的a
a{3,} 3次或3次以上重复的a
a{3,6} 3到6次重复的a

修正符

/g 查找所有可能的匹配
/i 不区分大小写
/m 多行匹配
/s 单行匹配
/x 忽略空白模式
/e 可执行模式,PHP专有
/A 强制从目标字符串开头匹配
/D 使用$限制结尾字符,则不允许结尾有换行
/U 只匹配最近的一个字符串;不重复匹配

最新回复

  • memory: 这是测试,不建议正式环境这样使。
  • 广州网站建设: 构建redis集群时候,不要使用生产环境
  • memory: 照着大差不着的改一下就成了rewrite ^/sort/([0-...
  • mage: 按照上面设置的伪静态url是类似这种形式的 /listinfo-...
  • mage: 比如这种URL:帝国7.5伪静态如何可以做到这种形式(拼音或者英...
  • memory: 额,难住我了,哈哈。我项目中没有用过这么复杂的。
  • 马哥: 请问如何设置目录名是拼音,然后文章页在目录下面的伪静态
  • memory: conf文件中location段加上规则就可以了呀。然后relo...
  • mage: 后台系统设置,设置好了。规则应该怎么处理,nginx的服务器
  • 葛一速: 这个函数很实用,谢谢分享
  • memory: 这个是layui1.x中的,我项目中就是这样用的。如果你没理解,...
  • 李帅: 你会不会的 发这个糊弄人
  • memory: 升级完之后,测试无误后再删旧的~~~
  • 广州网站建设: 升级之前用不用先删了内核
  • memory: 没测试过...
  • 欧文斯: 对于多个 IP 段呢?比如超过 1000 个 IP 段,匹配速度...
  • 广州网站建设: 了解了,博客的通配符HTTPS证书