<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-1.8.2.js"></script>
</head>
<body>
<form enctype="multipart/form-data">
<img class="userHeadImg" width="200" height="180" style="border: 1px yellowgreen solid"/>
<input class="fileUserHeadImg" type="file" multiple="multiple" style="display: none" />
</form>
<script>
$(function() {
$(".userHeadImg").click(function() {
$(".fileUserHeadImg").click();
});
});
//预览图片
function showImg(s, sender) {
var $this = $(s);
//获取所有文件,只有input[type=file]中才用
var files = sender.currentTarget.files;
for (var i = 0; i < files.length; i++) {
//其中一个文件
var file = files[i];
//HTML5,浏览器中支持的对象
var reader = new FileReader();
// 加载 file
reader.addEventListener("load", function (event) {
var loadedFile = event.target;
// 检查 format
if (file.type.match('image')) {
//获取图片预览模板
var l = ".userHeadImg";
var $img = $(l);
$img.attr("src", loadedFile.result);
}
});
// 将文件读取到reader流中
reader.readAsDataURL(file);
}
}
$(".fileUserHeadImg").change(function (sender) {
showImg(this, sender);
});
</script>
</body>
</html>
html 图片预览
最新推荐文章于 2024-07-29 15:03:08 发布