H5图片上传显示

Html

Css

.file {
	position:relative;
	display:inline-block;
	background:#D0EEFF;
	border:1px solid #99D3F5;
	border-radius:4px;
	padding:4px 12px;
	overflow:hidden;
	color:#1E88C7;
	text-decoration:none;
	text-indent:0;
	line-height:20px;
}
.file input {
	position:absolute;
	font-size:100px;
	right:0;
	top:0;
	opacity:0;
}
.file:hover {
	background:#AADFFD;
	border-color:#78C3F3;
	color:#004974;
	text-decoration:none;
}
.my-car-thumbnail img {
	width:100%
}

img.onload = function() {
             var cvs = document.createElement('canvas'),
                 ctx = cvs.getContext('2d');

if (img.height > maxH) {
                 img.width *= maxH / img.height;
                 img.height = maxH;
             }
             cvs.width = img.width;
             cvs.height = img.height;

ctx.clearRect(0, 0, cvs.width, cvs.height);
             ctx.drawImage(img, 0, 0, img.width, img.height);
             var dataUrl = cvs.toDataURL('image/jpeg', 1);
             $(".img_wrap").attr("src", dataUrl);
             $(".img_wrap").show();
             // 上传略
             that.upload(dataUrl);
         };

img.src = res;
     },
     upload: function(image_data) {
         /*这里写上次方法,图片流是base64_encode的*/
     }
 };

$(document).ready(function() {
     demo_h5_upload_ops.init();
 });

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

立即下载

H5图片上传显示



代码描述：H5实现图片上传显示

1

最新

发表评论全部评论

暂时没有评论！

贝塔贝塔0

2019/12/17 19:10:30

多少度
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

zhaofen

相关代码

H5图片上传显示

最新