HTML5上传图片预览（不需通过服务器）

css:

    <style>
        #show div.item{
            margin-left: 10px;
            float: left;
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
        #show img{
            height: auto;
        }
    </style>

html：

    <div class="upload_box">
            <input type="file" id="upimg" multiple>
    </div>
    <div class="show" id="show"></div>

javascript:

<script>
        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(files);
                    }
                });
                // 点击放大效果
                show.addEventListener('click', function(e){
                    var target = e.target;
                    if(target.tagName.toUpperCase() == "IMG"){
                        var parent = target.parentNode; //item
                        var big = parent.className.indexOf("big") >= 0;
                        if(!big){
                            // 点击放大
                            parent.style.cssText = 'width:'+target.naturalWidth+'px; height:'+target.naturalHeight+'px;'; // 关键
                            parent.className += ' big';
                        }else{
                            // 再点击缩小
                            parent.style.cssText = 'width:200px; height:200px;'; // 关键
                            parent.className = 'item';
                        }
                    }
                });
            }

            function checkFile(files){
                if(files.length != 0){
                    //获取文件并用FileReader进行读取
                    var html = "";
                    var i = 0;
                    var funcs = function(){
                        if(files[i]){
                            var reader = new FileReader();
                            if(!/image\/\w+/.test(files[i].type)){
                                show.innerHTML = "请选择图片类型";
                                return false;
                            }
                            reader.onload  = function(e){
                                html += '<div class="item"><img src="'+e.target.result+'" alt="img"></div>';
                                i++;
                                funcs();
                            }
                            reader.readAsDataURL(files[i]);
                        }else{
                             show.innerHTML += html;
                        }
                    }
                    funcs();
                }
            }

            return{
                init : init
            }
        })();

        window.onload = function(){
            Upload.init();
        }


    </script>

此方法只用于IE10+浏览器
实例下载http://pan.baidu.com/s/1c2iGBZy

如果需求为只能上传一张图片则可以改为

    <input type="file" id="upimg">