图片预览与查看原图

Html

Css


    
    拖拽区域

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;
}

var Upload = (function() {
    var upimg = document.getElementById('upimg');
    var show = document.getElementById('show');
    var drag = document.getElementById('drag');

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);
            }
        });

drag.addEventListener('dragenter', function(e) {
            this.className = 'drag_hover';
        }, false);
        drag.addEventListener('dragleave', function(e) {
            this.className = '';
        }, false);
        drag.addEventListener('drop', function(e) {
            var files = e.dataTransfer.files;
            this.className = '';
            if (files.length != 0) {
                checkFile(files);
            };

e.preventDefault();
        }, false)
        drag.addEventListener('dragover', function(e) {
            e.dataTransfer.dragEffect = 'copy';
            e.preventDefault();
        }, false);

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)
    }

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

立即下载

图片预览与查看原图



代码描述：多图上传预览与查看原图

3

最新

发表评论全部评论

暂时没有评论！

锅锅0

2017/8/2 13:20:16

挺好的
回复

罄?一瞥0

2017/7/14 9:10:19

请问函数funcs()是在哪里里声明的；getObjectURL()又在哪里

MuTong121381

2017/7/14 14:05:48

funcs():在71行 var funcs =function() {} 声明的；
getObjectURL():没有在代码里声明，方法代码是：
function getObjectURL(file) { var url = null ; if (window.createObjectURL!=undefined) { // basic url = window.createObjectURL(file) ; } else if (window.URL!=undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file) ; } else if (window.webkitURL!=undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file) ; } return url ; }

回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

_愿无岁月可回首 .

相关代码

图片预览与查看原图

最新