关闭

页面中显示图片

标签: 图片显示
92人阅读 评论(0) 收藏 举报
分类:

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


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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:8977次
    • 积分:231
    • 等级:
    • 排名:千里之外
    • 原创:14篇
    • 转载:5篇
    • 译文:0篇
    • 评论:0条