<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#preview, .img, img {
width: 200px;
height: 200px;
}
#preview {
border: 1px solid #000;
margin-left: 88px;
margin-top: -15px;
}
</style>
</head>
<body>
<div style="margin-bottom: 15px; clear: both">
<label style="padding: 9px 15px;">
<span style="color: red;">*</span>轮播图
</label>
<input type="file" onchange="preview(this)" />
</div>
<div style="margin-bottom: 15px; position: relative;">
<label style="padding: 9px 15px;">
缩略图
</label>
<div id="preview"></div>
</div>
<div style="margin-bottom: 15px; clear: both">
<label style="padding: 9px 15px;">
<span style="color: red;">*</span>链接
</label>
<input type="text" />
</div>
<div style="margin-bottom: 15px; clear: both">
<label style="padding: 9px 15px;">
<span style="color: red;">*</span>描述
</label>
<input type="text" />
</div>
<div>
<input type="button" value="增加" id="tj">
</div>
<script type="text/javascript">
document.getElementById("tj").onclick = function(){
alert("添加按钮事件!");
};
function preview(file) {
//输出数据
//console.log("12312000111222");
//console.log(file); //<input type="file" onchange="preview(this)">
//console.log(file.files);//FileList {0: File(88977), length: 1}
//console.log(file.files[0]);//File(88977) {name: "QQ截图20180323131837.png", lastModified: 1521782319792, lastModifiedDate: Fri Mar 23 2018 13:18:39 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 88977, …}
//--
var prevDiv = document.getElementById(‘preview‘);//获取这个div对象
console.log(file.files && file.files[0]); //File(88977) {name: "QQ截图20180323131837.png", lastModified: 1521782319792, lastModifiedDate: Fri Mar 23 2018 13:18:39 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 88977, …}
if (file.files && file.files[0]) {
//--检测浏览器是否支持Filereader
if(window.FileReader) {
var fr = new FileReader();
// add your code here
}
else {
alert("Not supported by your browser!");
}
//--
var reader = new FileReader();
reader.onload = function(evt) {
prevDiv.innerHTML = ‘<img src="‘ + evt.target.result + ‘" />‘;
}
reader.readAsDataURL(file.files[0]);
} else {
prevDiv.innerHTML = ‘<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\‘‘ + file.value + ‘\‘"></div>‘;
}
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/enych/p/8631135.html
时间： 2024-09-30 16:51:51