本地图片显示在网页

最新推荐文章于 2024-08-20 18:38:32 发布

转载最新推荐文章于 2024-08-20 18:38:32 发布 · 664 阅读

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种实现图片预览与上传的方法，通过检测用户浏览器类型来适配不同技术方案，确保跨浏览器兼容性。该方法支持IE、Firefox、Chrome等主流浏览器，并能够根据用户上传的文件类型进行限制。

<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);
}