文件上传css样式,css 上传文件

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

我们的目标是创造一个简洁，用纯CSS实现的，在所有浏览器里的样子和布局是一样的上传文件按钮。我们可以这样：

步骤1.创建一个简单的HTML标记

Upload

第2步：CSS：

有点棘手了

.fileUpload

{

position:

relative;

overflow:

hidden;

margin:

10px;

}

.fileUpload

input.upload

{

position:

absolute;

top:

0;

right:

0;

margin:

0;

padding:

0;

font-size:

20px;

cursor:

pointer;

opacity:

0;

filter:

alpha(opacity=0);

}

为简单起见，我使用应用了BootstrapCSS样式的按钮

(div.file-upload)。

演示：

上传按钮，显示选中的文件

不幸的是纯CSS的做不到这一点。但是，如果你真的想显示所选文件，下面的JavaScript代码片段可以帮助你。

JavaScript：

document.getElementById("uploadBtn").onchange

=

function

()

{

document.getElementById("uploadFile").value

=

this.value;

};

DOM:

Upload

相关问答

Q1: css样式引入有哪几种方式,优先级是怎么样的？

按优先级：前端优先读取正序。正规规范优先倒序。

style= 这样肯定是最优的，但也是最不推荐的。前端标签直接写入。

延伸阅读：读取优先，灵活使用，如大量页面，每页面都要设置。工作繁琐，大量写入增加代码量。不利优化。

style type="text/css" 这样属于第二读取方式。直接写在对应的页面。

延伸阅读：每页面都要设置。工作繁琐，大量写入增加代码量。不利优化。

link type="text/css" href=" 引用CSS文件 第三级。这全局引入.

延伸阅读：全局CSS。可以分离代码及外部引入，简单快捷。也是现在都在用的。

Q2: 修改了HTML文件,上传到ftp后,css样式为什么变了

CSS样式通过class名和标签甚至标签层级顺序选择具体元素的，你是不是改了html的标签或者class

Q3: css样式用FTP上传不起作用

不起作用的可能性：

第一种可能，网站系统有缓存，后台或者手动清除缓存看下。

第二种可能，css文件引入时候有误，请检查。

第三种可能，css写的有误。

排查错误

打开相应网页，查看源代码，看时候能打开相应的css文件，查看css文件，是否是上传的css文件。

火狐的”firebug“或则谷歌浏览器的”检查元素“，调试css，直到达到预想的效果。

Q4: 网站用户注册登录模板css样式上传到那个文件夹？

这个要看引用文件的路径了。

比如在用户登录html中，引用的reg.css和login.css标签如下：

　

　（1）link href='reg.css' type='text/css' rel='stylesheet' /

（2）link href='css/login.css' type='text/css' rel='stylesheet' /

reg.css的路径前没有什么文件夹，说明reg.css的路径是与html文件存放在同一个文件夹下的，而login.css 前面多了'css/'，这说明，login.css是存放在与html同一文件夹中的一个css文件夹中,举例说明如下：

　

　A文件夹中有：（1）html登录注册.html （2）reg.css（3）css文件夹【即是B文件夹】

而B文件夹中：（1）login.css

而UserAjax.rar是一个压缩文件吧？解压后，看你把文件放哪了，就在script标签中的src中设置好路径就行了，跟上面link标签中的href属性一样。