weui uploader java_WEUI原生以及使用webuploader插件上传方法

weui1.0.0

webuploder-0.1.5

不多说，直接看代码

$(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 = $('

0%

');

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

$preview.removeClass('weui-uploader__file_status')

.find('.weui-uploader__file-content')

.remove();

}

}

setTimeout(uploading, 30);

};

img.src = e.target.result;

};

reader.readAsDataURL(file);

}

});

});

html

照片

保存

上面是搜到的原生解决办法，这个基础上可以将base64上传到七牛，详见：

下面是webuploader插件上传代码，本例上传七牛

var uploader = WebUploader.create({

auto: true,

swf: '/statics/webuploader-0.1.5/Uploader.swf',

server: 'http://upload.qiniu.com/',

pick: '#imgInput',

accept: {

title: 'Images',

extensions: 'gif,jpg,jpeg,bmp,png',

mimeTypes: 'image/*'

},

method: 'POST',

formData: {'token':'%token%'}

});

uploader.on('uploadStart',function(file) {

this.options.formData.key='image/'+new Date().getTime()+'/'+file.name.replace(/,/g, '');

});

uploader.on('fileQueued', function(file) {

var $preview = $('

0%

');

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

// 上传成功，想干点什么就在这里干吧

});

html

选择图片