css美化input file按钮的代码方法
input file在系统默认下的外观: 我们最多通过定义input的border来改变系统默认的外观:
如果要让浏览按钮更漂亮一点,我们想定义它的背景颜色,甚至想用背景图片来代替,通过css定义input flie还真是办不到的。偶然看到一篇文章:input file 文件选择框美化 作者是把系统默认的按钮设置透明度为0,再定义一个label标签样式,来覆盖透明掉的按钮。
按照作者的方法,我也试验了一下,代码如下:
input file的另类做法
上传文件:
浏览...
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
效果:虽然多了很多标签,但这种偷梁换柱的做法还是值得研究。有没有更好、更科学的作法还有待发掘。
相关推荐
-
读取input:file的路径并显示本地图片的方法
复制代码 代码如下: <!doctype html> <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <title>Image preview example</title> <script type="text/javascript"> var
-
判断多个input type=file是否有已经选择好文件的代码
表单中有多个<input type="file" name="uploadfile" contentEditable="false" style="width:80%">, 提交表单时需要判断其中至少要有一个input已经选择好文件. 复制代码 代码如下: <input type="file" name="uploadfile" contentEditable=&quo
-
jQuery判断多个input file 都不能为空的例子
例如有两个图片上传的 input,都必须上传图片: html 复制代码 代码如下: 选择文件 1 :<input type="file" name="myfile[]" class="myfile"> 选择文件 2 :<input type="file" name="myfile[]" class="myfile"> js 复制代码 代码如下: if($(&quo
-
js 实现 input type="file" 文件上传示例代码
在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type="file" />隐藏,点其他的标签(图片等)来时实现选择文件上传功能. 看代码: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he
-
input file上传 图片预览功能实例代码
input file上传图片预览其实很简单,只是没做过的感觉很神奇,今天我就扒下她神秘的面纱,其实原理真的很简单,下面通过一段代码大家都明白了. 具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="jquery.js"></script>
-
input file的默认value清空与赋值方法
第1个方法是大多人传统做法,替换HTML代码,楼上的已经用到了,我不过是用正则优化一下; 第2个方法利用SendKeys模拟键盘操作,需要允许浏览器调用ActiveX才行: 第3个方法,有点像武侠小说里的"乾坤大挪移"一样,呵呵,看看就知道了! 把input file類型的value清空--Test by 编程浪子 function clearMethod1() { var objFile=document.getElementsByTagName('input')[0]; alert
-
上传图片预览JS脚本 Input file图片预览的实现示例
在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预览的功能,还被我给翻了出来,在这里做个记录,方便自己以后用,也方便其他需要的朋友! 代码很简单,如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
-
javascript 图片上传预览-兼容标准
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
将input file的选择的文件清空的两种解决方案
上传文件时,选择了文件后想清空文件路径,搜索了一下,用两种方法解决 复制代码 代码如下: <input type="file" id="fileupload" name="file" /> 第一种: 复制代码 代码如下: var obj = document.getElementById('fileupload') ; obj.select(); document.selection.clear(); 第二种: 复制代码 代码如下:
-
js 获取、清空input type="file"的值示例代码
上传控件基础知识说明: 上传控件(<input type="file"/>)用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的,不能通过javascript来赋值,这就使得不能通过value=""语句来清空它.很容易理解为什么只读,如果可以随意赋值的话,那么用户只要打开你的网页,你就可以随心所欲的上传他电脑上的文件了. js 获取<intput type=file />的值 复制代码 代码如下: &l
-
模拟QQ心情图片上传预览示例
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以下插件,在别的图片上传功能说不定各位能用的上. 1.jQuery File Upload Demo地址:http://blueimp.github.io/jQuery-File-Upload/ 优点是使用jquery进行图片的异步上传,可控性好,可根据自己的需求任意定制: 缺点是在IE9等一些浏览器
-
ie8本地图片上传预览示例代码
复制代码 代码如下: imgpath= getRealPath(fileId): document.getElementById("divSBTP").style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ imgpath + "\")";//使用滤镜效果 func
随机推荐
- JavaScript中判断两个字符串是否相等的方法
- DEBUG命令详解教程第1/2页
- 详解CentOS 7 网卡命名修改为eth0格式
- php实现向javascript传递数组的方法
- JS组件Bootstrap ContextMenu右键菜单使用方法
- Codeigniter的一些优秀特性总结
- PHP基础学习小结
- linux系统使用python获取内存使用信息脚本分享
- 举例讲解Python设计模式编程中的访问者与观察者模式
- java session出现的错误
- c++连接mysql5.6的出错问题总结
- Bootstrap学习笔记之css样式设计(2)
- 一个简单横向javascript日期控件
- PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
- 原生JavaScript+LESS实现瀑布流
- 学做Bootstrap的第一个页面
- C语言的递归思想实例分析
- PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
- 控制PHP的输出:缓存并压缩动态页面
- php通过文件流方式复制文件的方法