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

来源：互联网发布：淘宝真皮女装退货率编辑：程序博客网时间：2024/06/14 18:02

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">

0 0