美化文件上传按钮

<!DOCTYPE html>
<html>
<head>
    <style>
        .fileInputContainer{
            display:block;
            height:32px;
            background:url(http://images.cnblogs.com/cnblogs_com/yeminglong/773287/o_1181850.png);
            position:relative;
            width: 32px;
            z-index:4;

        }
        .fileInput{
            display:blcok;
            height:32px;
            overflow: hidden;
            font-size: 32px;
            position:absolute;
            z-index:5;
            right:0;
            top:0;
            opacity: 0;
            filter:alpha(opacity=0);
            cursor:pointer;
            border:1px solid red;

        }
    </style>

</head>
<body>

    <a href="javascript:void(0);" class="fileInputContainer">
        <input class="fileInput" type="file" name="" id="" />
    </a>

</body>
</html>
时间: 2025-01-01 21:15:51

美化文件上传按钮的相关文章

CSS自定义文件上传按钮

原文:CSS自定义文件上传按钮 今天一同事问我文件上传按钮的问题,情况是这样的,他页面上有3个按钮,分为左中右三个,左边的位按钮甲,右边的位按钮乙,而中间的就是个文件选择按钮,情况大概是这个样子的: 两边的按钮都有了样式,但中间的选择文件的样式死活调不出来,于是我就同他一块解决,后来经过自己设置width,height折腾无果,再求助google终于找到了解决办法,这个方法是这样的: 用一个标签套着文件域,然后调整文件域外边的元素,设置成按钮样式,然后,在把文件域"隐藏"掉(这里的隐藏

文件上传按钮的用户自定义样式的实现

一般在做 WEB 开发项目的时候碰到文件上传必不可少,但是因为各家浏览器对于 <input type="file"> 标签支持不同所以在各个浏览器下的显示也是不一样的.可能在用户体验方面会形成困扰,今天就给大家介绍一下文件上传按钮的用户自定义样式的实现. 实现原理: 建立两个层,一个层包装 <input type="file"> 以下简称文件按钮层,一个层包装上传文件按钮的自定义样式,以下渐层样式层.设置两个层的大小一致,将文件按钮层设置相对

ExtJs4学习(十三)如何给文件上传按钮加背景图片

我们日常看到的上传按钮都是这样的 当然browse是默认的,我们可以去改变它,比如替换成"上传",配置为buttonText: '上传', 如果我们想给按钮添加背景图片呢,你可能注意到了这个配置 buttonConfig { xtype: 'filefield', emptyText: 'Select an image', fieldLabel: 'Photo', name: 'photo-path', buttonText: '', buttonConfig: { iconCls:

文件上传按钮input[type=&quot;file&quot;]按钮美化时在IE8中的bug【兼容至IE8】

首先看一下完成后的效果,鼠标移入可改变为手指的效果. 在此就不加图标了 <label class="file-upload"> <span>上传附件</span> <input type="file" name=""> </label> 在IE8中需要将input透明后还不能完全达到效果,还需要将字体设大一些,撑开input,这是IE自带的兼容问题. .file-upload{ disp

CSS自定义文件上传按钮样式,兼容主流浏览器

1. [代码][HTML]代码 1 <div class="box"> 2 <input type="text" name="copyFile" class="textbox" /> 3 <a href="javascript:void(0);" class="link">浏览</a> 4 <input type="file

详解jQuery uploadify文件上传插件的使用方法

uploadify这个插件是基于js里面的jquery库写的.结合了ajax和flash,实现了这个多线程上传的功能. 现在最新版为3.2.1. 在线实例 实例中用到的php文件UploaderDemo.php请在页面下方下载 引入文件 <link rel="stylesheet" type="text/css" href="uploadify.css" /> <script type="text/javascript

JQUERY插件JqueryAjaxFileUplaoder----更简单的异步文件上传

异步上传相信大家都做过类似的功能,JqueryAjaxFileUploader为我们提供了更简单的实现和使用方式.不过既然是JQUERY的插件那么它所依赖的环境大家都懂得.JqueryAjaxFileUploader并不华丽,也没有提供美化文件上传控件的css,它并不像jQuery File Upload(喜欢的同学可以去尝试下),提供了美观的样式和专门的图片预览.多任务上传等等, JqueryAjaxFileUploader 所拥有的很简单,只是异步上传文件的功能,当然这并不排除由你亲自为它披

文件上传下载总结

文件下载的步骤: jsp省略: servlet代码: 1 public class DownServlet extends HttpServlet{ 2 3 @Override 4 protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 5 req.setCharacterEncoding("utf-8"); 6 res

兼容ie的jquery ajax文件上传

Ajax文件上传插件很多,但兼容性各不一样,许多是对ie不兼容的,另外项目中是要求将网页内容嵌入到桌面端应用的,这样就不允许带flash的上传插件了,如:jquery uploadify...悲剧 对于Ajax文件上传,大体是有: 1.创建一个input type="file" 的文件上传按钮,根据其id监听绑定其change事件,在事件中用jquery创建一个iframe,嵌入添加隐藏form,同时创建input type="file",id相同的文件上传按钮,并