<script>
$(function(){
$("#avatsel1").click(function(){
$("input[type='file']").trigger('click');
});
$("#avatval").click(function(){
$("input[type='file']").trigger('click');
});
$("input[type='file']").change(function(){
$("#avatval").val($(this).val());
});
});
</script>

<div class="input-file">
<input type="text" id="avatval" placeholder="请选择文件···" readonly="readonly" />
<input type="file" name="avatar" id="avatar"/>
<a href="javascript:void(0);" class="button-selectimg" id="avatsel1">选择文件</a>
</div>
 
a[class="button-selectimg"] {
color: #00A2D4;
padding: 4px 6px;
border: 1px dashed #00A2D4;
border-radius: 2px;
text-decoration: none;
} input[id="avatval"] {
padding: 3px 6px;
padding-left: 10px;
border: 1px solid #E7EAEC;
width: 230px;
height: 25px;
line-height: 25px;
border-left: 3px solid #3FB7EB;
background: #FAFAFB;
border-radius: 2px;
} input[type='file'] {
border: 0px;
display: none;
}

html中自定义上传文件的样式的更多相关文章

  1. [k]自定义上传文件按钮样式

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> ...

  2. bootstrap改变上传文件按钮样式,并显示已上传文件名

    参考博文: html中,文件上传时使用的<input type="file">的样式自定义 html中<input type="file"&g ...

  3. 使用jQuery.FileUpload插件和服Backload组件自定义上传文件夹

    在零配置情况下,文件的上传文件夹是根目录下的Files文件夹,如何自定义文件的上传文件夹呢? □ 在web.config中配置 1: <configuration> 2: <conf ...

  4. Juploader 1.0 谷歌(chrome)浏览器中成功上传文件后返回信息异常

    在项目中使用了Juploader 1.0无刷新上传文件的js组件,在IE8以上没有问题,代码如下: function InitialUploadDirectly(OnUploadFunc, butto ...

  5. MVC文件上传05-使用客户端jQuery-File-Upload插件和服务端Backload组件自定义上传文件夹

    在零配置情况下,文件的上传文件夹是根目录下的Files文件夹,如何自定义文件的上传文件夹呢? MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小  MVC文 ...

  6. 在asp.net 中怎样上传文件夹

    以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传  ...

  7. 【Azure 应用服务】PHP应用部署在App Service for Linux环境中,上传文件大于1MB时,遇见了413 Request Entity Too Large 错误的解决方法

    问题描述 在PHP项目部署在App Service后,上传文件如果大于1MB就会遇见 413 Request Entity Too Large 的问题. 问题解决 目前这个问题,首先需要分析应用所在的 ...

  8. Android应用开发中webview上传文件的几种思路

    1. 常规方法,重写WebChromeClient 的 openFileChooser 方法 private class MyWebChromeClient extends WebChromeClie ...

  9. 定制FileField中的上传文件名称

    FileField中的upload_to属性可以设定上传文件的存储目录和名称,它可以是个字符串,也可以是个callable,比如一个方法. 当upload_to的值设为一个方法时,就可以对上传文件的名 ...

随机推荐

  1. 四十三:数据库之SQLAlchemy之group_by和having子句

    group_by:根据某个字段进行分组,比如想要根据年龄进行分组,再统计每一组有多少人having:对查找结果进一步过滤,类似于SQL语句的where 准备工作 from sqlalchemy imp ...

  2. poatman接口测试--初试

    接到测试任务,对两个商品接口,进行接口测试 测试工具:postman 域名:rap2查找的或询问开发, 接口的参数规则:参考rap2的备注 开发没有添加详细说明的,让开发补充说明规则,及定义的返回状态 ...

  3. [原创]关于类似方程x+y+z=P的解的总解

    1:如果x,y,z>=0,则直接插板法c(P+3,3-1)2:如果x,y,z均有下界a1,a2,a3,则求解方程x+y+z=P-a1-a2-a33:如果x,y,z均有上界的自然数,则使用容斥定理 ...

  4. JAVA 编程思想一

    1: 动态绑定和静态绑定 使用private或static或final修饰的变量或者方法,使用静态绑定.而虚方法(可以被子类重写的方法)则会根据运行时的对象进行动态绑定: 静态绑定使用类信息来完成,而 ...

  5. PERCONA-TOOLKIT 安装 使用

    1.基于MySQL主从环境 可以参考https://www.cnblogs.com/xianglei_/p/12068241.html 上传rpm包 并安装 1 2 cd /usr/local/src ...

  6. 索引之----mysql单列索引失效的情况

    使用的索引名称: 1.隐式转换导致索引失效. 由于表字段定义为vachar类型,但在查询时把该字段作为number类型 以及where条件传给mysql. 2.对索引列进行任何操作(计算(+.-.*. ...

  7. web框架 Spring+SpringMvc+Jpa 纯注解搭建

    0.jar包依赖 maven  pom.xml <properties> <spring_version>4.3.25.RELEASE</spring_version&g ...

  8. 洛谷 P1484 种树 题解

    题面 这是一道标准的带反悔贪心: 利用大根堆来维护最大值: 当选择了num[i]后,反悔了,反之选择选了num[i-1]和num[i+1]时获利便增加了num[i-1]+num[i+1]-num[i] ...

  9. c语言小技巧:C语言学习笔记之位运算求余

    我们都知道,求一个数被另一个数整除的余数,可以用求余运算符”%“,但是,如果不 允许使用求余运算符,又该怎么办呢?下面介绍一种方法,是通过位运算来求余,但是注 意:该方法只对除数是2的N次方幂时才有效 ...

  10. python__基础数据类型

    字符串和常用数据结构 使用字符串 第二次世界大战促使了现代电子计算机的诞生,当初的想法很简单,就是用计算机来计算导弹的弹道,因此在计算机刚刚诞生的那个年代,计算机处理的信息主要是数值,而世界上的第一台 ...