比别人多一点志气,你就会多一份出息 [登录·注册]

吕滔博客

首页 开发 运维 工具 摄影

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个
  • 发布文章:1311篇
  • 用户评论:688条
  • 开博至今:3978天

正则速查

[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? 零个或多个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: 这是我3年前玩过一次,当时因为安装完后,发现日常办公还好,但是好...
  • sdf: 想问一下,激活工具激活后,后面会出现提示要再次重新激活吗?
  • memory: 你要用碗装我吗?还是要我把扔的扔进你碗里???!!! &^_^&
  • 薛才杰: 同感,快扔到我的碗里来。。。
  • memory: 要说明一下,在大陆及香港的云主机或VPS,都是不支持的。原因都懂...
  • 历史趣谈LishiQtan: 很好的文章,值得收藏
  • memory: 现在回头看,,,这么烂的代码,也是醉了.
  • memory: 有空试试apache的
  • 脚踏实地: rInfo数组是怎么来的
  • 朋友们: 我都是这么建站的
  • memory: 明眼人.
  • 上官元恒: $lunarInfo数组是怎么来的,这是重点
  • memory: 你知道的太多了...
  • yjl: 这个肯定解决的不是空间的问题,可能是复用的问题,有可能是“站群”的问题
  • Smithd994: Hello! This post could not be wr...
  • memory: controll文件assign ,然后模板文件中直接foreach