修改上传文件按钮

HTML:

<form id="imgFile" action="" method="post" enctype="multipart/form-data">
                    <a href="javascript:void(0);" class="file">
                        上传头像
                        <input type="file" name="rp_pic_file" class="rp_pic_btn" id="upload_pic">
                    </a>
</form>

CSS:

.file {
    position: relative;
    display: inline-block;
    padding: 0;
    overflow: hidden;
    text-decoration: none;
    text-indent: 0;
    width:158px;
    height:50px;
    line-height:50px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
    text-align: center;
    border: none;
    color: #000000;
    font-size:16px;
    background: #ffe400;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
}
时间: 2024-11-01 01:16:52

修改上传文件按钮的相关文章

怎样用纯HTML和CSS更改默认的上传文件按钮样式

如果你曾经试过,你就会知道,用纯CSS样式加HTML实现统一的上传文件按钮可能会很麻烦.看看下面的不同浏览器的截图.很明显的,他们长得很不一样. 我们的目标是创造一个简洁,用纯CSS实现的,在所有浏览器里的样子和布局是一样的上传文件按钮.我们可以这样: 步骤1.创建一个简单的HTML标记 1 2 3 4 <div class="fileUpload btn btn-primary">     <span>Upload</span>     <i

万家报账平台没有“上传文件”按钮的解决办法

在有的电脑没有"上传文件"的按钮? 第一步:首先检查浏览器设置. 第二步:找到IE的Internet选项菜单,开启菜单栏的根据下列方面找,如下图: 第三步:找到Internet选项后,点击,选择安全选项卡,并点击"自定义级别" 第四步:找到"将文件上载到服务器时包含本地目录路径"选择"启用".然后点击确定关闭IE,重启打开. 第五步:更新浏览器的flash版本.在百度中搜索"flash player官网"即

上传文件按钮美化,上传文件前后状态控制

我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的. input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能. 注:input 的 type 为 file 时,它的 name 必须有值,因为这个 name 会做为上传文件信息的数组名称. <a href="javascript:;" class=&q

testlink 修改上传文件的大小限制

大家在使用testlink导入测试时,可能会遇到由于上传的文件太大,而不能上传的现象.当然建议大家在导入用例或者上传文件时,不要上传过大的文件,因为这样的速度确实非常慢.可是由于特殊的原因我们必须要导入或者上传大文件时怎么办呢? 这里主要修改两个参数: 1.打开文件config.inc.php,找到 $tlCfg->import_file_max_size_bytes = '409600';// in bytes $tlCfg->import_max_row = '10000'; // in

WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法

由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作中遇到的一个问题:公司的后端同事用bootstrap的模态框,结合WebUploadder做后台上传文件的功能的时候,发现上传按钮点击无效.同事过来请求我支援,我研究了下,发现了三种解决方案,下面具体说说是这三种方法是怎么解决的. 我们先来分析一下解决这个问题的思路: 为什么上传控件放到模态框里面就

dsm winscp 获得 root 权限修改上传文件

使用DSM开了ssh只可以用admin登陆scp没有权限上传文件.可以用以下方法. ssh 登陆 dsm sudo -i  取得root权限 修改 /etc/sudoers 文件中 %administrators ALL=NOPASSWD:ALL     (无修改权可用 chmod +w /etc/sudoers) 打开winscp 编辑会话 点 高级 修改shell 添加 sudo -i 保存 ->登陆(完) 原文地址:https://www.cnblogs.com/yangjig/p/100

web前端上传文件按钮自定义样式

思路: 按钮进行隐藏,样式自己该怎么写怎么写,之后通过js监测input改变上传文件. 前端写法: // jquery + bootstrap写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上传文件获取URL</title> <link rel="stylesheet" h

修改上传文件的按钮样式

css样式: .a-upload { padding: 0px 10px; height: 30px; line-height: 30px; position: relative; cursor: pointer; color: #888; background: #fafafa; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; display: inline-block; *display: inline; *zoom

上传文件按钮代码示例

input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用a标签或其他标签包裹,就实现了美化功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .a-upload { position: relative; dis