[置顶] input file上传图片预览(查看图片大小，类型，名字)------------------------------自己动手写jQuery插件
2016-06-02 17:13
916 查看
最简单的实现方法：
<!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);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery中的DOM操作学习笔记
- Js类的静态方法与实例方法区分以及jQuery如何拓展两种方法
- 20 个最棒的 jQuery Tab 插件
- jquery 性能优化与实践
- jQuery中获取radio button中被选中的value值
- jQuery操作表格（table）的常用方法、技巧汇总
- jQuery Ajax页面局部加载方法汇总
- jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
- jquery批量提交表单值 和批量设置表单值
- jquery 圆形进度条
- jQuery Ajax 全局调用封装实例代码详解
- jQuery页面加载初始化的3种方法(推荐)
- 解决Electron加载带jquery的项目报错问题
- jQuery实现发送短信验证码后60秒倒计时
- jquery 图片自动切换
- Jquery和JS获取ul中li标签的实现方法
- Jquery获取第一个子元素简单实例
- 《 锋利的jQuery 》读后记录
- JS和JQUERY有关下拉框的操作
- Js/Jquery获取iframe中的元素