图片预览与查看原图

<div class='upload_box'>
    <input type="file" id='upimg' multiple>
    <span id="drag">拖拽区域</span>
</div>
<div class='show' id="show"></div>

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: zoom-in;  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: zoom-out;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)
    }

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