本地图片显示在网页

<if condition="$member_info['member_avatar']">
                        <img style="display: inline-block;border-radius: 100%" id="page-pic" width="80px"  height="80px"  src="__PUBLIC__/member/avatar/<!--{$member_info.member_avatar}-->"/>
                    <else />

                        <img style="display: inline-block;border-radius: 100%"id="page-pic" width="80px"  height="80px"  src="__PUBLIC__/member/avatar/grzx.png"/>
                </if>
                    <input type="file" onchange="filePic(this)" value="" placeholder="" id="member_avatar" name="member_avatar">



/**
* 从 file 域获取 本地图片 url
*/
function getFileUrl(sourceId) {
var url;
if (navigator.userAgent.indexOf("MSIE") >= 1 && !(navigator.userAgent.indexOf("MSIE 10.0") > 0) ) { // IE10取消了滤镜
//url = document.getElementById(sourceId).value;
document.all.imgOne.select();
$("#preview").focus();
url = document.selection.createRange().text;
} else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
} else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}else if(navigator.userAgent.indexOf("MSIE 10.0") > 0){
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}else{
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}
return url;
}

/**
* 将本地图片 显示到浏览器上
*/
function preImg(sourceId, target) {
var url = getFileUrl(sourceId);
if(window.navigator.userAgent.indexOf("MSIE") >= 1 && !(navigator.userAgent.indexOf("MSIE 10.0") > 0) ) {
var picpreview=document.getElementById("preview");
picpreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;
}else{
$("#page-pic").attr("src",url);
}

}

function filePic(h) {
if (!h.files.length) {
alert("未选择文件");
return;
}
var type, h_type;
h_type = h.value.split(".");
type = h_type[h_type.length - 1].toLocaleLowerCase();
var file = h.files[0];
if ((type != "jpg" && type != "png" && type != "jpeg")) {
h.value = "";
h.files = null;
alert("抱歉,仅支持的jpg或png或者jpeg图片");
return;
}
var hID = h.id;
preImg(hID);
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值