zoukankan      html  css  js  c++  java
  • ie8及其以下版本兼容性问题之input file隐藏上传文件

    文件上传时,默认的file标签很难看,而且每个浏览器下都有很大差距。因此我们基本都把真正的file标签给隐藏,然后创建一个标签来替代它。但是由于IE出于安全方面的考虑上传文件时必须点击file的浏览按钮选择文件才可以把文件上传上去。此时我们可以将file input透明化, 遮罩在自定义的button input 上面。这样用户看到的是我们自定义button的外观而实际上点击的还是file标签。

    这样一来我们自定义的按钮存在又能真正点击到file标签,IE下就可以正常上传文件了。

    示例:

    //html
    <div class="modifyInfo_upload pr">
    	<span>上传头像</span>
    	<input type="file" name="portrait" id="upLoadPortrait" value="">
    </div>
    
    //css
    .modifyInfo_upload{
    	height: 30px;
    	text-align: center;
    	margin-bottom: 29px;
    }
    .modifyInfo_upload span{
    	height: 30px;
    	line-height: 30px;
    	color: #1db69a;
    	cursor: pointer;
    }
    .modifyInfo_upload input{
         58px;
        height: 20px;
        overflow: hidden;
        opacity: 0;
        -ms-filter:"alpha(opacity=0)";
        position: absolute;
        top: 4px;
        left: 0;
        right: 0;
        margin: 0 auto;
        cursor: pointer;
    }
    
    //js
    var portraitPath;
    $("#upLoadPortrait").on('change',function(event){
        if($(this).val() != ''){
        	var strExtension = $(this).val().substr($(this).val().lastIndexOf('.') + 1);
        	if (strExtension != 'jpg' && strExtension != 'gif' && strExtension != 'png' && strExtension != 'bmp') {
                alert("请选择图片文件!");
            }else{
            	portraitPath = $(this).val();
            	console.log(portraitPath);
            	$('.modifyInfo_portrait img').attr('src',portraitPath);
            }
        }
    });
    

    参考链接:IE input file隐藏不能上传文件解决方法

  • 相关阅读:
    1、线性DP 198. 打家劫舍
    1、线性DP 354. 俄罗斯套娃信封问题
    127. 单词接龙
    1. 线性DP 887. 鸡蛋掉落 (DP+二分)
    200. 岛屿数量
    1. 线性DP 152. 乘积最大子数组
    1. 线性DP 53. 最大子序和.
    1. 线性DP 120. 三角形最小路径和
    如何在RHEL 8上安装Python 3
    在Ubuntu 20.04 LTS Focal Fossa上安装Drupal
  • 原文地址:https://www.cnblogs.com/YSPyishuihan/p/7071283.html
Copyright © 2011-2022 走看看