html中自定义上传文件的样式

<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中自定义上传文件的样式的更多相关文章
- [k]自定义上传文件按钮样式
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> ...
- bootstrap改变上传文件按钮样式,并显示已上传文件名
参考博文: html中,文件上传时使用的<input type="file">的样式自定义 html中<input type="file"&g ...
- 使用jQuery.FileUpload插件和服Backload组件自定义上传文件夹
在零配置情况下,文件的上传文件夹是根目录下的Files文件夹,如何自定义文件的上传文件夹呢? □ 在web.config中配置 1: <configuration> 2: <conf ...
- Juploader 1.0 谷歌(chrome)浏览器中成功上传文件后返回信息异常
在项目中使用了Juploader 1.0无刷新上传文件的js组件,在IE8以上没有问题,代码如下: function InitialUploadDirectly(OnUploadFunc, butto ...
- MVC文件上传05-使用客户端jQuery-File-Upload插件和服务端Backload组件自定义上传文件夹
在零配置情况下,文件的上传文件夹是根目录下的Files文件夹,如何自定义文件的上传文件夹呢? MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小 MVC文 ...
- 在asp.net 中怎样上传文件夹
以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传 ...
- 【Azure 应用服务】PHP应用部署在App Service for Linux环境中,上传文件大于1MB时,遇见了413 Request Entity Too Large 错误的解决方法
问题描述 在PHP项目部署在App Service后,上传文件如果大于1MB就会遇见 413 Request Entity Too Large 的问题. 问题解决 目前这个问题,首先需要分析应用所在的 ...
- Android应用开发中webview上传文件的几种思路
1. 常规方法,重写WebChromeClient 的 openFileChooser 方法 private class MyWebChromeClient extends WebChromeClie ...
- 定制FileField中的上传文件名称
FileField中的upload_to属性可以设定上传文件的存储目录和名称,它可以是个字符串,也可以是个callable,比如一个方法. 当upload_to的值设为一个方法时,就可以对上传文件的名 ...
随机推荐
- 四十三:数据库之SQLAlchemy之group_by和having子句
group_by:根据某个字段进行分组,比如想要根据年龄进行分组,再统计每一组有多少人having:对查找结果进一步过滤,类似于SQL语句的where 准备工作 from sqlalchemy imp ...
- poatman接口测试--初试
接到测试任务,对两个商品接口,进行接口测试 测试工具:postman 域名:rap2查找的或询问开发, 接口的参数规则:参考rap2的备注 开发没有添加详细说明的,让开发补充说明规则,及定义的返回状态 ...
- [原创]关于类似方程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均有上界的自然数,则使用容斥定理 ...
- JAVA 编程思想一
1: 动态绑定和静态绑定 使用private或static或final修饰的变量或者方法,使用静态绑定.而虚方法(可以被子类重写的方法)则会根据运行时的对象进行动态绑定: 静态绑定使用类信息来完成,而 ...
- PERCONA-TOOLKIT 安装 使用
1.基于MySQL主从环境 可以参考https://www.cnblogs.com/xianglei_/p/12068241.html 上传rpm包 并安装 1 2 cd /usr/local/src ...
- 索引之----mysql单列索引失效的情况
使用的索引名称: 1.隐式转换导致索引失效. 由于表字段定义为vachar类型,但在查询时把该字段作为number类型 以及where条件传给mysql. 2.对索引列进行任何操作(计算(+.-.*. ...
- web框架 Spring+SpringMvc+Jpa 纯注解搭建
0.jar包依赖 maven pom.xml <properties> <spring_version>4.3.25.RELEASE</spring_version&g ...
- 洛谷 P1484 种树 题解
题面 这是一道标准的带反悔贪心: 利用大根堆来维护最大值: 当选择了num[i]后,反悔了,反之选择选了num[i-1]和num[i+1]时获利便增加了num[i-1]+num[i+1]-num[i] ...
- c语言小技巧:C语言学习笔记之位运算求余
我们都知道,求一个数被另一个数整除的余数,可以用求余运算符”%“,但是,如果不 允许使用求余运算符,又该怎么办呢?下面介绍一种方法,是通过位运算来求余,但是注 意:该方法只对除数是2的N次方幂时才有效 ...
- python__基础数据类型
字符串和常用数据结构 使用字符串 第二次世界大战促使了现代电子计算机的诞生,当初的想法很简单,就是用计算机来计算导弹的弹道,因此在计算机刚刚诞生的那个年代,计算机处理的信息主要是数值,而世界上的第一台 ...