页面中显示图片

解决问题：图片上传至服务器后如何显示在此不再赘述，这里讲的是使用标签选择图片后，即可以在页面上显示的问题。

---

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>