• 本地图片显示在网页


    <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);
    }
    
  • 相关阅读:
    vue+element-ui实现前端分页
    element-UI中table表格的row-click事件怎么获取一行数据的id
    使用一个for循环将N*N的二维数组的所有值置1
    http常见的状态码
    反转一个英文句子中的单词,并且对应位置大小写不改变
    用一条SQL语句查出每门课都大于80分的学生的姓名
    平滑重启原理及平滑更新
    php之命名空间
    php之trait-实现多继承
    C入门之一
  • 原文地址:https://www.cnblogs.com/bubaya/p/7565045.html
Copyright © 2020-2023  润新知