input file上传图片预览(查看图片大小，类型，名字)------------------------------自己动手写jQuery插件
最简单的实现方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<title></title>
<style type="text/css">
div.imger {
width: 182px;
height: 142px;
border: 1px solid green;
position: relative;
}
div.imger input {
position: absolute;
opacity: 0;
display: block;
width: 100%;
height: 100%;
z-index: 10;
}
div.imger img {
display: block;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
div.imger span.closer {
position: absolute;
top: 10px;
right: 10px;
color: red;
z-index: 10;
cursor: pointer;
display: none;
}
div.imgers {
float: left;
margin: 5px 10px 5px;
border: 1px solid red;
}
</style>
<script type="text/javascript">
$(function() {
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file)
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file)
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file)
}
return url
};
var strs = '<div class="imgers imger">' +
'<input type="file" />' +
'<img src="img/btn.png" />' +
'<span class="closer">X</span>' +
'</div>';
$("div.imger").on('change', "input[type='file']", function(e) {
var srcs = getObjectURL(this.files[0]);
alert(srcs);
/**************************/
console.log("图片大小:" + this.files[0].size / 1024 + " 图片类型:" + this.files[0].type + " 图片名字:" + this.files[0].name + " 图片上次修改时间:" + this.files[0].lastModifiedDate);
var tuozhanming = (this.files[0].name).split('.');
console.log("文件拓展名:" + tuozhanming[1]);
/*************************/
$(this).next('img').attr('src', srcs).next('span.closer').show();
});
$("div.imger").on('click', 'span.closer', function() {
$("div.imger input[type='file']").val('');
$(this).hide().prev('img').attr('src', 'img/btn.png');
});
//-----------------------------------------------------------------------------//
$("body").on('change', "div.imgers input[type='file']", function(e) {
var srcs = getObjectURL(this.files[0]);
alert(srcs);
/**************************/
console.log("图片大小:" + this.files[0].size / 1024 + " 图片类型:" + this.files[0].type + " 图片名字:" + this.files[0].name + " 图片上次修改时间:" + this.files[0].lastModifiedDate);
/*************************/
$(this).next('img').attr('src', srcs).next('span.closer').show();
$(this).parent('div').after(strs);
});
$("body").on('click', 'div.imgers span.closer', function() {
if ($("div.imgers").length > 1) {
$(this).parent('div.imgers').remove();
} else {
$("div.imgers input[type='file']").val('');
$(this).hide().prev('img').attr('src', 'img/btn.png');
}
});
})
</script>
</head>
<body>
<div class="imger">
<input type="file" />
<img src="img/btn.png" />
<span class="closer">X</span>
</div>
<div class="imger">
<input type="file" />
<img src="img/btn.png" />
<span class="closer">X</span>
</div>
<div class="imgers imger">
<input type="file" />
<img src="img/btn.png" />
<span class="closer">X</span>
</div>
</body>
</html>
自己动手写jQuery插件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/imger.js"></script>
<title></title>
<style type="text/css">
div.imger {
width: 182px;
height: 142px;
border: 1px solid green;
position: relative;
}
div.imger input {
position: absolute;
opacity: 0;
display: block;
width: 100%;
height: 100%;
z-index: 10;
}
div.imger img {
display: block;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
div.imger span.closer {
position: absolute;
top: 10px;
right: 10px;
color: red;
z-index: 10;
cursor: pointer;
display: none;
}
div.imgers {
float: left;
margin: 5px 10px 5px;
border: 1px solid red;
}
</style>
<script type="text/javascript">
$(function() {
$("div.imger").imgers({
width: '182', //这两个参数没用上
height: '142',
autoplus: false
});
$("div.imgers").imgers({
width: '182', //这两个参数没用上
height: '142',
autoplus: true
});
})
</script>
</head>
<body>
<div class="imger">
<input type="file" />
<img src="img/btn.png" />
<span class="closer">X</span>
</div>
<div class="imger">
<input type="file" />
<img src="img/btn.png" />
<span class="closer">X</span>
</div>
<div class="imgers imger">
<input type="file" />
<img src="img/btn.png" />
<span class="closer">X</span>
</div>
</body>
</html>
imgers.js
;
(function($) {
$.fn.imgers = function(options) {
var local_val = {
width: '100', //长
height: '100', //宽
autoplus: false //自动增加
};
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file)
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file)
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file)
}
return url
};
var strs = '<div class="imgers imger">' +
'<input type="file" />' +
'<img src="img/btn.png" />' +
'<span class="closer">X</span>' +
'</div>';
var obj = $.extend({}, local_val, options);
console.log(obj);
$("div.imger").on('click', 'span.closer', function() {
$("div.imger input[type='file']").val('');
$(this).hide().prev('img').attr('src', 'img/btn.png');
});
$("body").on('click', 'div.imgers span.closer', function() {
if ($("div.imgers").length > 1) {
$(this).parent('div.imgers').remove();
} else {
$("div.imgers input[type='file']").val('');
$(this).hide().prev('img').attr('src', 'img/btn.png');
}
});
if (obj.autoplus) {
$("body").on('change', 'div.imgers input', function() {
var srcs = getObjectURL(this.files[0]);
alert(srcs);
/**************************/
console.log("图片大小:" + this.files[0].size / 1024 + " 图片类型:" + this.files[0].type + " 图片名字:" + this.files[0].name + " 图片上次修改时间:" + this.files[0].lastModifiedDate);
/*************************/
$(this).next('img').attr('src', srcs).next('span.closer').show();
$(this).parent('div').after(strs);
})
} else {
$("body").on('change', 'div.imger input', function() {
var srcs = getObjectURL(this.files[0]);
alert(srcs);
/**************************/
console.log("图片大小:" + this.files[0].size / 1024 + " 图片类型:" + this.files[0].type + " 图片名字:" + this.files[0].name + " 图片上次修改时间:" + this.files[0].lastModifiedDate);
var tuozhanming = (this.files[0].name).split('.');
console.log("文件拓展名:" + tuozhanming[1]);
/*************************/
$(this).next('img').attr('src', srcs).next('span.closer').show();
})
}
}
return this
})(jQuery);