weui uploader上传

Html

Css




    上传
    
      
        
          
            
              图片上传
              0/6
            
            
              
                 
              
                
            
          
        
      
    
  
  
    
    
       警告
      
      弹窗内容，告知当前页面信息等
      
        确定

$.weui = {};
$.weui.alert = function(options) {
    options = $.extend({
        title: '警告',
        text: '警告内容'
    }, options);
    var $alert = $('.weui_dialog_alert');
    $alert.find('.weui_dialog_title').text(options.title);
    $alert.find('.weui_dialog_bd').text(options.text);
    $alert.on('touchend click', '.weui_btn_dialog', function() {
        $alert.hide();
    });
    $alert.show();
};

$(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_status" style="background-image:url(' + base64 + ')"><div class="weui_uploader_status_content">0%</div></li>');
                    $('.weui_uploader_files').append($preview);
                    var num = $('.weui_uploader_file').length;
                    $('.js_counter').text(num + '/' + maxCount);

// 然后假装在上传，可以post base64格式，也可以构造blob对象上传，也可以用微信JSSDK上传

var progress = 0;

img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    });
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

weui uploader上传



代码描述：weui中uploader上传例子

3

最新

发表评论全部评论

暂时没有评论！

草戒(*^_^*)0

2017/11/23 10:23:17

请问，我想获取图片路径并进行保存；我该如何获取图片图片回复

不知道起什么名字才吸引人0

2017/6/1 16:38:36

再弄个删除按钮会好些回复

dzy1690

2017/5/22 20:37:45

代码不全
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

suini

相关代码

weui uploader上传

最新