input上传按钮 文字修改办法

解决思路是把input 放在文字的上边，弄成透明的，这样在点文字时，实际是点击了input，这样就实现了文件的上传。

具体代码：

<style>
    #uploadImg{ font-size:12px; overflow:hidden; position:absolute}
    #file{ position:absolute; z-index:100; margin-left:-180px;      font-size:60px;opacity:0;filter:alpha(opacity=0); margin-top:-5px;}
</style>
<span id="uploadImg">
<input type="file" id="file" size="1" >
<a href="#">上传图片</a></span>
时间： 2024-11-10 00:28:31

input上传按钮 文字修改办法的相关文章

css input[type=file] 样式美化，input上传按钮美化

我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的,后面文章会总结. 思路: input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能. 代码如下: DOM结构: <a href="javascript:;" class="a-upload"> <input type=

input[type=file] 样式美化，input上传按钮美化

<style>.file { position: relative; display: inline-block; background: #D0EEFF; border: 1px solid #99D3F5; border-radius: 4px; padding: 4px 12px; overflow: hidden; color: #1E88C7; text-decoration: none; text-indent: 0; line-height: 20px;}.file input

Chrome浏览器点击 input file上传按钮时延迟3-5秒的解决方法

1.  Google chrome 浏览器在52版本之后出现一个bug,就是点击 input file上传按钮时反应很慢,需要等待3-5秒种之后才能弹出选择文件的对话框.比如 windows里可能是这样: MAC里可能是这样:

CSS自定义文件上传按钮

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

解决WebUploader 上传按钮按F12 才行的问题

遇到了 WebUploader 插件的上传按钮点击无效(此时鼠标在按钮任何位置时,按钮都没变化).按F12 之后才有反应(此时鼠标在按钮任何位置时,按钮颜色都会变深) 的问题,网上查到一些答案,找到了一种测试有效的办法. 首先出现Bug的原因是插件生成[选择文件]按钮的长宽都是0,所以点击不到:需要重新渲染一下网页,而F12正好有渲染网页的功能. 解决办法分以下两步: 1)在页面加一段样式: <style> #filePicker div:nth-child(2){width:100%!imp

用jQuery File Upload做的上传控件demo，支持同页面多个上传按钮

需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为了代码的简洁所以就开始寻求其他的方法,期间试过uploadify,但是由于样式始终调不出来,最后就放弃了,直到发现这么个小巧的玩意,jQuery File Upload. 本文包含了upload的js实现,html的分析,css的实现等内容,文章末尾有git地址 最简运行时 官网下载的demo有N多

Plupload 上传详细讲解，Plupload 多实例上传，Plupload多个上传按钮--推荐使用

今天帮朋友解决  Plupload  上传的问题,查了很多资料,资料还是挺全的,但是有点零零散散的,故整理好,合并发出来. 本教程包括: Plupload  上传详细讲. Plupload  多实例上传. Plupload  多个上传按钮. Plupload  上传成功获取返回值. 我们来看一个比较全的  Plupload  Demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

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

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

模拟上传，可自行定义上传按钮的名称和图片。

<table>    <tr>    <td>上传</td>    <td style="width:300px;">                    <div style="position: absolute; z-index: 3; cursor:hand; float:left; width:227px;">              <input id="File