HTML内容:
<div>
<p>当前头像:</p>
<div>
<div>
<a href="#">
<img src="__ROOT__/Uploads/{$user.pic}" /> //显示头像
<input type="file" name="pic" class="img" /> //新上传头像,pic需对应数据库表中字段
<input type="hidden" name="tu" value="{$user.pic}" /> //原头像,tu可随意命名,但不要重复
</a>
</div>
<a href="JavaScript:;" >上传头像</a> //如需点击此处上传,则需.img的宽高将此处覆盖,否则需点击.img才能上传文件
</div>
</div>
JS内容:
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function(){
// 图像上传当即显示
$(".img").change(function(){
if($(this).val()){
var objUrl = gebjectURL(this.files[0]) ;
console.log("objUrl = "+objUrl) ;
var objUrl = gebjectURL(this.files[0]) ;
$(this).prev("img").attr("src",objUrl)
}
})
function gebjectURL(file) {
var url = null ;
// createObjectURL是图片预览函数
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>