HTML5图像预览

最新推荐文章于 2024-08-06 17:41:12 发布

qq_32089551

最新推荐文章于 2024-08-06 17:41:12 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/qq_32089551/article/details/94603012

版权

<!DOCTYPE html>

<head>

<title>图片预览与查看原图</title>

body{ background: #f8f8f8;}

#drag{ width: 400px;height: 100px;border: 1px dotted #333; text-align: center; line-height: 100px; color: #aaa; display: inline-block;}

.drag_hover{background: #FAD6F9;}

.show{margin-top: 20px; position: relative; width: 950px;}

.show .item{position: absolute; width: 250px; height: 250px;}

.show img{max-width: 224px;max-height: 224px;cursor: url(./images/big.cur), auto; box-shadow: 0px 1px 1px 1px #AAA3A3;}

.show img:hover{box-shadow: 0px 1px 1px 2px #83ABD2;}

.show .big{z-index: 2;}

.show .big img{max-width: none; max-height: none; cursor: url(./images/small.cur), auto;box-shadow: 2px 2px 10px 2px #666;}

</style>

</head>

<body>

</div>

</body>

var Upload = (function(){

var upimg = document.getElementById('upimg');

var show = document.getElementById('show');

function init(){

if(!(window.FileReader && window.File && window.FileList && window.Blob)){

show.innerHTML = '您的浏览器不支持fileReader';

upimg.setAttribute('disabled', 'disabled');

return false;

}

handler();

}

function handler(){

upimg.addEventListener('change', function(e){

var files = this.files;

if(files.length){

checkFile(this.files);

}

});

show.addEventListener('click', function(e){

var target = e.target;

if(target.tagName.toUpperCase()=='IMG'){

var parent = target.parentNode;

var big = parent.className.indexOf('big')>=0;

var item = this.childNodes;

for(var i=0; i<item.length; i++){

item[i].className = 'item';

item[i].firstElementChild.style.cssText = '';

}

var parent = target.parentNode;

if(!big){

// 点击放大

target.style.cssText = 'width:'+target.naturalWidth+'px; height:'+target.naturalHeight+'px;'; // 关键

parent.className += ' big';

}

}, false)

}

function checkFile(files){

if (files.length != 0) {

//获取文件并用FileReader进行读取

var html = '';

var i = 0, j = show.childElementCount;

var funcs = function(){

if(files[i]){

var x = parseInt((i+j)/4)*250;

var y = ((i+j)%4)*250;

var reader = new FileReader();

if(!/image\/\w+/.test(files[i].type)){

show.innerHTML = "请确保文件为图像类型";

return false;

}

reader.onload = function(e) {

html += '<div class="item" style="top:'+x+'px; left:'+y+'px;"><img src="'+e.target.result+'" alt="img"></div>';

i++;

funcs(); // onload为异步调用

};

reader.readAsDataURL(files[i]);

}else{

show.innerHTML += html;

}

funcs();

}

return {

init : init

}

})();

Upload.init();

</script>

</html>

qq_32089551

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫