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