先上效果图:
默认的 文件上传按钮 在各大浏览器 上兼容效果很差
在chrome上直接 就没有输入框 这针对浏览器测试是一个 比较大的麻烦
幸好jquery可以帮助你实现 这个自定义的上传按钮的样式的修改
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>File Uploader</title>
<link href="css/basic.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://filamentgroup.github.com/EnhanceJS/enhance.js"></script>
<script type="text/javascript">
// Run capabilities test
enhance({
loadScripts: [
'https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js',
'js/jQuery.fileinput.js',
'js/example.js'
],
loadStyles: ['css/enhanced.css']
});
</script>
</head>
<body>
<!-- realistic form attributes: <form action="#" method="post" enctype="multipart/form-data"> -->
<form action="#">
<fieldset>
<legend>Profile image</legend>
<label for="file">Choose photo</label>
<input type="file" name="file" id="file" />
<input type="submit" name="upload" id="upload" value="Upload photo" />
</fieldset>
</form>
</body>
</html>
完整代码 请下载
- 大小: 10.9 KB
- 大小: 2.9 KB
分享到:
相关推荐
jQuery实现一个自定义的单选按钮radio
jQuery自定义单选按钮复选框代码.zip
在项目开发中,如果我们使用javascript自带的提示对话框,感觉不怎么美观,所以我们通常都是自己定义一些对话框,这里我实现点击按钮就弹窗一个登录的窗口,点击该窗口并可以实现拖拽功能,太多文字的东西说不清楚,...
Jquery是继prototype之后又一个优秀的Javascrīpt框架,它是轻量级的js库,它兼容CSS3,还兼容各种浏览器。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery...
<form> 单选框 <i class='input_style radio_bg'><input type="radio" name="hot" ... 这是一款通过jQuery特效来改变单选按钮 复选框样式,将它们进行美化处理的网页特效,适合新手,代码量非常少。
jquery+css+html 自定义弹框 代码简洁易懂 三个js方法搞定,使用了html代码显示弹框 css控制弹框样式 随着页面移动显示在中间位置 jquery+js 控制弹框操作 可操作点击确认取消 实现自定义方法。文件解压之后可直接...
在网页上我们经常看到,当点击一个按钮时,弹出一个自定义窗口,并且可以随意的拖拽,从而改变其位置 使用jquery实现拖拽,则必须要jquery的文件了,实现步骤: 1、引入jquery文件 2、编写js脚本 具体代码: html...
jQuery自定义添加删除表单代码是一款可以切换上下位置,添加删除的问卷调查表单代码。
jquery-easyui的扩展组件jquery-easyui-datagridview,其中的datagrid-detailview.js可方便地生成子网格,但是每行均默认生成展开按钮,实际我们希望对某些行不显示展开按钮,网上很多人提供的解决方案就是通过dom...
2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的...
jQuery支持自定义消息提示框代码是一款可以自由配置背景和前景色,提示框的位置,提示框的显示时间,提示框的动画效果等。
类似删除的效果,在执行之前,一般需要添加确认对话框,点确认的话执行,取消按钮就不执行,传统的js if(confirm('确定删除吗?')) { //执行代码 } 这种效果比较丑,使用jquery mobile优化一下 需要引用...
jquery自定义表单控件
基于jQuery的视频播放组件,低版本浏览器使用object和embed,代码量少,video控制器按钮样式可自定义。详细使用方法可见 https://blog.csdn.net/zh_rey/article/details/80812931
MooTools、jQuery 和 PHP 的 GitHub 按钮 GitHubButtons 是著名的插件的一个分支,使用原始样式和基于 MooTools/jQuery 的... 支持自定义按钮文本 您可以手动设置“计数” 本机代码支持 jQuery 以及 MooTools 和 PHP -
平滑,轻巧的jQuery插件折叠和展开大段文字与“阅读更多”和“关闭”链接。演示地址:http://www.jq22.com/jquery-info388
jQuery自定义数值抽奖活动代码是一款点击开始按钮计算机会产生玩家输入范围内的随机数,点击停止按钮,将显示数字最终结果。