首先,是HTML编辑
最后图片展示
<div class="am-panel am-panel-default">
<div class="am-panel-bd">
<div class="am-g">
<div class="am-u-md-4">
<img id="img0" class="am-img-circle am-img-thumbnail" src="" alt=""/>
</div>
<div class="am-u-md-8">
<p>一个帅气或美腻的头像可以让你瞬间引起他或她的关注哟,快点上传头像吧。 </p>
<form class="am-form" id="picForm" action="user_addEmployeePic" namespace="/" method="post" theme="simple">
<div class="am-form-group">
<input type="file" name="file" id="file" multiple="multiple" />
<input type="hidden" id="picUserID" name="picUserID" value="${editUser.userid }"/><br/>
<input type="text" name="photoMessage" value="风采备注..."/><br/>
<button type="submit" class="am-btn am-btn-primary am-btn-xs" >保存</button>
</div>
</form>
</div>
</div>
</div>
</div>
然后是js效果
<script>
$("#file").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
console.log("objUrl = "+objUrl) ;
if (objUrl) {
$("#img0").attr("src", objUrl) ;
}
}) ;
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>
最后图片展示