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

摘要: weui构架下的原生及webuploader插件上传js代码

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



html

<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">
						<li class="weui-uploader__file" style="background-image:url(http://imgsize.ph.126.net/?imgurl=http://cms-bucket.nosdn.127.net/ba2d23de68ad4dcc8ed67622f911f14c20170113154227.png_140x88x1x85.jpg)">
						</li>
					</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>

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

https://support.qiniu.com/question/69078

下面是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 = $('<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();
// 上传成功,想干点什么就在这里干吧
});

html

<div class="weui-cell">
	<div class="weui-cell__bd">
		<div class="weui-uploader__bd">
			<ul class="weui-uploader__files" id="imgList">
				<li id="" class="weui-uploader__file" style="background-image:url()"></li>
			</ul>
			<div class="weui-uploader__input-box">
				<div id="imgInput" class="weui-uploader__input">选择图片</div>
			</div>
		</div>
	</div>
</div>

https://my.oschina.net/illone/blog/826574

html5 css3 实现瀑布流布局

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • Consectetuer adipiscing elit.
  • Eu risus.
  • Vestibulum auctor dapibus neque.
  • Lorem ipsum dolor sit amet
  • Aliquam tincidunt mauris eu risus. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Vestibulum auctor dapibus neque.

.example {
-webkit-columns: 150px;
-moz-columns: 150px;
columns: 150px;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
column-gap: 2em;
}

body {
font-size: 12px;
font-family: ‘Georgia’, serif;
font-weight: 400;
line-height: 1.45;
color: #333;
background: #ecf0f1;
padding: 1em;
}

li {
background: white;
padding: 1em;
margin-bottom: 1.3em;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}

使用clipboard.js实现页面内容复制到剪贴板

clipboard.js是一个github上的开源项目,可以实现纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能。

1、访问clipboard.js项目主页——https://github.com/zenorocha/clipboard.js

2、下载clipboard.min.js,并在页面中引用

  1. <!– clipboard Script –>
  2.         <script type=“text/javascript” src=“script/clipboard.min.js”></script>

 

3、在script中写实例化语句:

  1. <script type=“text/javascript”>
  2.         $(document).ready(function(){
  3.             var clipboard = new Clipboard(‘.btn’);
  4. }
  5. </script>

4、写页面按钮,实现点击按钮复制指定内容

  1. <button class=“btn” data-clipboard-text=“http://www.hbcloudwide.com/oss/video/7”>点击复制</button>

当然,clipboard.js还可以实现多种复制或剪切效果。具体用法参看github项目主页即可。

 

http://blog.csdn.net/softwave/article/details/50054477

html 表格布局 简单dome


<style type="text/css">
/*表格*/
.table_vs .td1{background:#ded1e9;width: 30%; height: 45px;}
.table_vs .td2{background: #efe9ff;}
.table_vs .td3{background:#fee2b5; width: 35%;}
</style>

<table align="center" border="0" cellpadding="0" cellspacing="1" style="text-align: center;" width="100%" class="table_vs">
<thead>
<tr>
<td class="td1" style="background-color: #ee2a39; color:#fff; text-align:center; font-weight:bold; font-size:17px; padding-top:2%; padding-bottom:2%;">真爱医院</td>
<td class="td2" style="background-color: #ffdadd; color:#fff; font-weight:bold; font-size:17px; padding-top:2%; padding-bottom:2%">VS</td>
<td class="td3" style="background-color: #4c4c4c; color:#fff; text-align:center; font-weight:bold; font-size:17px; padding-top:2%; padding-bottom:2%;">其他医院</td>
</tr>
</thead>
<tbody>
<tr >
<td class="td1">
<p>必要的检查,大约在200元左右</p></td>
<td class="td2">
术前</td>
<td class="td3">
<p>200-500元</p></td>
</tr>

<tr >
<td class="td1">
<p>根据孕囊大小、手术方式不同,价格大约在600-2000元不等</p></td>
<td class="td2">
术中</td>
<td class="td3">
<p>1000-3000元</p></td>
</tr>

<tr >
<td class="td1">
<p>术后消炎药约百元左右 </p></td>
<td class="td2">
术后</td>
<td class="td3">
<p>1000-3000元</p></td>
</tr>

<tr >
<td class="td1">
<p>1000-2000元左右</p></td>
<td class="td2">
总计</td>
<td class="td3">
<p>1000-3000元</p></td>
</tr>
</tbody>
</table>

烟花 canvas html html5

<html><head>
<meta charset=”UTF-8″>
<title>canvas basic – firework – happy new year!</title>
<style>
*{margin: 0px;padding: 0px;}
canvas {display: block;}
</style>
</head>

<body>
<canvas id=”canvas” width=”1920″ height=”933″></canvas>
<script src=”http://www.100sucai.com/js/jquery.js”></script>

<script src=”js/index.js”>
$(function() {
var canvas = $(‘#canvas’)[0];
canvas.width = $(window).width();
canvas.height = $(window).height();
var ctx = canvas.getContext(‘2d’);

// init
ctx.fillStyle = ‘#000’;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// objects
var listFire = [];
var listFirework = [];
var fireNumber = 10;
var center = { x: canvas.width / 2, y: canvas.height / 2 };
var range = 100;
for (var i = 0; i < fireNumber; i++) {
var fire = {
x: Math.random() * range / 2 – range / 4 + center.x,
y: Math.random() * range * 2 + canvas.height,
size: Math.random() + 0.5,
fill: ‘#fd1’,
vx: Math.random() – 0.5,
vy: -(Math.random() + 4),
ax: Math.random() * 0.02 – 0.01,
far: Math.random() * range + (center.y – range)
};
fire.base = {
x: fire.x,
y: fire.y,
vx: fire.vx
};
//
listFire.push(fire);
}

function randColor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var color = ‘rgb($r, $g, $b)’;
color = color.replace(‘$r’, r);
color = color.replace(‘$g’, g);
color = color.replace(‘$b’, b);
return color;
}

(function loop() {
requestAnimationFrame(loop);
update();
draw();
})();

function update() {
for (var i = 0; i < listFire.length; i++) {
var fire = listFire[i];
//
if (fire.y <= fire.far) {
// case add firework
var color = randColor();
for (var i = 0; i < fireNumber * 5; i++) {
var firework = {
x: fire.x,
y: fire.y,
size: Math.random() + 1.5,
fill: color,
vx: Math.random() * 5 – 2.5,
vy: Math.random() * -5 + 1.5,
ay: 0.05,
alpha: 1,
life: Math.round(Math.random() * range / 2) + range / 2
};
firework.base = {
life: firework.life,
size: firework.size
};
listFirework.push(firework);
}
// reset
fire.y = fire.base.y;
fire.x = fire.base.x;
fire.vx = fire.base.vx;
fire.ax = Math.random() * 0.02 – 0.01;
}
//
fire.x += fire.vx;
fire.y += fire.vy;
fire.vx += fire.ax;
}

for (var i = listFirework.length – 1; i >= 0; i–) {
var firework = listFirework[i];
if (firework) {
firework.x += firework.vx;
firework.y += firework.vy;
firework.vy += firework.ay;
firework.alpha = firework.life / firework.base.life;
firework.size = firework.alpha * firework.base.size;
firework.alpha = firework.alpha > 0.6 ? 1 : firework.alpha;
//
firework.life–;
if (firework.life <= 0) {
listFirework.splice(i, 1);
}
}
}
}

function draw() {
// clear
ctx.globalCompositeOperation = ‘source-over’;
ctx.globalAlpha = 0.18;
ctx.fillStyle = ‘#000’;
ctx.fillRect(0, 0, canvas.width, canvas.height);

// re-draw
ctx.globalCompositeOperation = ‘screen’;
ctx.globalAlpha = 1;
for (var i = 0; i < listFire.length; i++) {
var fire = listFire[i];
ctx.beginPath();
ctx.arc(fire.x, fire.y, fire.size, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = fire.fill;
ctx.fill();
}

for (var i = 0; i < listFirework.length; i++) {
var firework = listFirework[i];
ctx.globalAlpha = firework.alpha;
ctx.beginPath();
ctx.arc(firework.x, firework.y, firework.size, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = firework.fill;
ctx.fill();
}
}
})
</script>

</body></html>

移动设备wap手机网页html5通过特殊链接:打电话,发短信,发邮件详细教程

最近逍遥乐在寻找手机网页调用系统短信发送短信的功能,用于分享和发送信息。找了一圈,找到了,这里分享出来,记录一下!

如果需要在移动浏览器中实现拨打电话,调用sms发短信,发送email等功能,移动手机WEB页面(HTML5)Javascript提供的接口是一个好办法。

采用url href链接的方式,实现在Safari  ios,Android 浏览器,webos浏览器,塞班浏览器,IE,Operamini等主流浏览器,进行拨打电话功能。

 1. 拨打电话

在电话号码前面可以加上 + (加号)表示国际号码。如:

最常用WEB页面JS实现一键拨号的电话拨打功能

例子:

<a href="tel:10086">10086</a>

使用wtai协议进行拨打电话

 <a href="wtai://wp/mc;10086">10086</a>

2. 发送短信

如果是需要调用短信的接口,可以将链接写成下面的格式:

sms:<phone_number>[,<phone-number>]*[?body=<message_body>]

例如:

1)给 10086 发短信:
<a href="sms:10086">发送信息</a>
(2)给 10086 发送内容为"cxye"的短信:
<a href="sms:10086?body=cxye">发送信息</a>
(3)给 10086 和 10010 发送内容为"cxye"的短信:
<a href="sms:10086,10010?body=cxye">发送信息</a>

 

3. Mail 发送邮件

就和普通的html一样使用mailto

(1)给test1@163.com发送邮件:

<a href="mailto:test1@163.com">mail</a>

(2)给test1@163.com和test2@126.com发送邮件:
<a href="mailto:test1@163.com,test2@126.com">mail</a>
2)给test1@163.com发送主题为“testing”的邮件:
<a href="mailto:test1@163.com?subject=Testing">mail</a>
2)给test1@163.com发送主题为“testing”的邮件,并抄送给test3@126.com
<a href="mailto:test1@163.com?subject=Testing mailto&cc=test3@126.com">mail</a>

 

4. Android Market

如果希望一个链接能够激活Android市场的功能,可以把链接写成:

 <a href="market://search?q=[query]">Android Market link</a>

其中<query>就是搜索的内容,你应用的名称

例子:

<a href="market://search?q=MyApp">MyApp</a>

5. GPS地图定位

<a href="geopoint:[经度],[纬度]">我的位置</a>

例如:

<a href="geopoint:108.954823,34.275891">我的位置</a>

 

html首行缩进2字符,可以使用CSS属性中的【text-indent】进行设置。

html首行缩进2字符,可以使用CSS属性中的【text-indent】进行设置。

设置代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>缩进2字符</title>
<style type="text/css">
p{ text-indent:2em;}
</style>
</head>
<body>
<p>首行缩进2字符的案例展示如下。需要多写几行看效果,需要多写几行看效果,需要多写几行看效果,需要多写几行看效果,需要多写几行看效果,需要多写几行看效果,需要多写几行看效果。</p>
</body>
</html>

说明:

text-indent表示段落首行缩进,2em表示缩进2字符。