解决问题:图片上传至服务器后如何显示在此不再赘述,这里讲的是使用标签选择图片后,即可以在页面上显示的问题。
JS代码:
<script type="text/javascript">
//获取input[file]图片的url Important
function getFileUrl(fileId) {
var url;
var file = document.getElementById(fileId);
var agent = navigator.userAgent;
if (agent.indexOf("MSIE")>=1) {
url = file.value;
} else if(agent.indexOf("Firefox")>0) {
url = window.URL.createObjectURL(file.files.item(0));
} else if(agent.indexOf("Chrome")>0) {
url = window.URL.createObjectURL(file.files.item(0));
}
return url;
}
//给 input type="file" 绑定click事件
function fileClick(){
$("#items_pic").click();
}
//显示图片
function showImg(){
var file = $("#items_pic");
if(file.value==''){
//设置默认图片
$("#myimg").attr();
}else{
$("#myimg").attr("src",getFileUrl("items_pic"));
}
}
</script>
图片显示区域:
<div style="margin-left: 15px">
<label for="tzggTime" class="col-lg-2 control-label">照片上传</label>
<div class="form-group">
<input type="button" value="选择文件" id="mybutton" class="mybtn" onclick="fileClick()" />
<input type="file" name="items_pic" id="items_pic" onchange="showImg();" style="display:none;" />
</div>
<div>
<img id="myimg" src="" style="height: 128px;width: 100px;"/>
</div>
</div>