<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/reset.css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<title>添加资讯页</title>
<style>
*{margin: 0px; padding: 0px; font-size: 18px;}
li{list-style: none;}
.leftLi{
text-align: left;
}
.rightLi{
min-width: 500px;
text-align: left;
}
.imgWrap{
position: relative;
z-index: 1;
width: 120px;
height: 120px;
border-radius: 3px;
}
#img0{
width: 120px;
height: 120px;
float: left;
}
#file0{
position: absolute;
top: 0;
display: none;
}
</style>
<script>
$(function(){
$("#img0").click(function(){
$("#file0").click();
})
$("#file0").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
console.log("objUrl = "+objUrl) ;
if (objUrl) {
$("#img0").attr("src", objUrl) ;
}
}) ;
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
})
</script>
</head>
<body>
<ul>
<li class="">
<div class="leftLi">
<span>封面:</span>
<span style="color: #f00;">点击图片进行封面更换</span>
</div>
<div class="rightLi">
<div class="imgWrap">
<input type="file" name="file0" id="file0" multiple="multiple" />
<img src="img/add.png" id="img0" >
</div>
</div>
</li>
</ul>
</form>
</div>
</div>
</body>
</html>
