&>&更改input（file）样式
更改input（file）样式
上传大小：646B
更改input（file）样式
综合评分：0
{%username%}回复{%com_username%}{%time%}\
/*点击出现回复框*/
$(".respond_btn").on("click", function (e) {
$(this).parents(".rightLi").children(".respond_box").show();
e.stopPropagation();
$(".cancel_res").on("click", function (e) {
$(this).parents(".res_b").siblings(".res_area").val("");
$(this).parents(".respond_box").hide();
e.stopPropagation();
/*删除评论*/
$(".del_comment_c").on("click", function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_invalid/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parents(".conLi").remove();
alert(data.msg);
$(".res_btn").click(function (e) {
var parentWrap = $(this).parents(".respond_box"),
q = parentWrap.find(".form1").serializeArray(),
resStr = $.trim(parentWrap.find(".res_area_r").val());
console.log(q);
//var res_area_r = $.trim($(".res_area_r").val());
if (resStr == '') {
$(".res_text").css({color: "red"});
$.post("/index.php/comment/do_comment_reply/", q,
function (data) {
if (data.succ == 1) {
var $target,
evt = e || window.
$target = $(evt.target || evt.srcElement);
var $dd = $target.parents('dd');
var $wrapReply = $dd.find('.respond_box');
console.log($wrapReply);
//var mess = $(".res_area_r").val();
var mess = resS
var str = str.replace(/{%header%}/g, data.header)
.replace(/{%href%}/g, 'http://' + window.location.host + '/user/' + data.username)
.replace(/{%username%}/g, data.username)
.replace(/{%com_username%}/g, data.com_username)
.replace(/{%time%}/g, data.time)
.replace(/{%id%}/g, data.id)
.replace(/{%mess%}/g, mess);
$dd.after(str);
$(".respond_box").hide();
$(".res_area_r").val("");
$(".res_area").val("");
$wrapReply.hide();
alert(data.msg);
}, "json");
/*删除回复*/
$(".rightLi").on("click", '.del_comment_r', function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_comment_del/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parent().parent().parent().parent().parent().remove();
$(e.target).parents('.res_list').remove()
alert(data.msg);
//填充回复
function KeyP(v) {
var parentWrap = $(v).parents(".respond_box");
parentWrap.find(".res_area_r").val($.trim(parentWrap.find(".res_area").val()));
评论共有0条
VIP会员动态
CSDN下载频道资源及相关规则调整公告V11.10
下载频道用户反馈专区
下载频道积分规则调整V1710.18
spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip
资源所需积分/C币
当前拥有积分
当前拥有C币
输入下载码
为了良好体验，不建议使用迅雷下载
更改input（file）样式
会员到期时间：
剩余下载个数：
剩余积分：0
为了良好体验，不建议使用迅雷下载
积分不足！
资源所需积分/C币
当前拥有积分
您可以选择
程序员的必选
绿色安全资源
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
您的积分不足，将扣除 10 C币
为了良好体验，不建议使用迅雷下载
无法举报自己的资源
你当前的下载分为234。
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可返还被扣除的积分
被举报人：
举报的资源分：
请选择类型
资源无法下载 （ 404页面、下载失败、资源本身问题）
资源无法使用 （文件损坏、内容缺失、题文不符）
侵犯版权资源 （侵犯公司或个人版权）
虚假资源 （恶意欺诈、刷分资源）
含色情、危害国家安全内容
含广告、木马病毒资源
*详细原因：
更改input（file）样式&input type=file .&,这种上传浏览按钮，能添加背景图片吗
<a data-traceid="question_detail_above_text_l&&
引用来自#3楼“艺术家”的帖子
不用他的按钮就行了。
&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.0 Transitional//EN&&
&TITLE& New Document &/TITLE&
&META NAME=&Generator& CONTENT=&EditPlus&&
&META NAME=&Author& CONTENT=&&&
&META NAME=&Keywords& CONTENT=&&&
&META NAME=&Description& CONTENT=&&&
&SCRIPT LANGUAGE=&JavaScript&&
function F_Open_dialog()
document.getElementById(&btn_file&).click();
&input type=&file& id=&btn_file& name=&btn_file& value=&test& style=&display:none&&
&input type=&button& name=&btn_abc& value=&浏览& onclick=&F_Open_dialog()&&
&我用jquery-form来ajax提交该表单，不能提交。
以前尝试过不行 可能技术不够 不过很多都不是用的图片
不用他的按钮就行了。
&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.0 Transitional//EN&&
&TITLE& New Document &/TITLE&
&META NAME=&Generator& CONTENT=&EditPlus&&
&META NAME=&Author& CONTENT=&&&
&META NAME=&Keywords& CONTENT=&&&
&META NAME=&Description& CONTENT=&&&
&SCRIPT LANGUAGE=&JavaScript&&
function F_Open_dialog()
document.getElementById(&btn_file&).click();
&input type=&file& id=&btn_file& name=&btn_file& value=&test& style=&display:none&&
&input type=&button& name=&btn_abc& value=&浏览& onclick=&F_Open_dialog()&&
是不是因为隐藏的关系？
引用来自#5楼“艺术家”的帖子
是不是因为隐藏的关系？
&根据我的 初步测试，貌似是这样的原因。
看jquery-form 能不能提交隐藏元素吧
查了一下官方的文档，也就是说，被隐藏的域实际上传过去啦，只是名称变了前面加个了前缀“invisible-”
&and controls that are not rendered because of&&settings may still be successful. For example:
&FORM action=&...& method=&post&&
&INPUT type=&password& style=&display:none&
name=&invisible-password&
value=&mypassword&&
will still cause a value to be paired with the name &invisible-password& and submitted with the form.
引用来自#4楼“赵霖”的帖子
引用来自#3楼“艺术家”的帖子
不用他的按钮就行了。
&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.0 Transitional//EN&&
&TITLE& New Document &/TITLE&
&META NAME=&Generator& CONTENT=&EditPlus&&
&META NAME=&Author& CONTENT=&&&
&META NAME=&Keywords& CONTENT=&&&
&META NAME=&Description& CONTENT=&&&
&SCRIPT LANGUAGE=&JavaScript&&
function F_Open_dialog()
document.getElementById(&btn_file&).click();
&input type=&file& id=&btn_file& name=&btn_file& value=&test& style=&display:none&&
&input type=&button& name=&btn_abc& value=&浏览& onclick=&F_Open_dialog()&&
&我用jquery-form来ajax提交该表单，不能提交。
这段代码是有问题的，浏览器的安全策略里面是不允许通过js来模拟点击文件域的，这样打开了文件上传框，选择的文件时不会上传的。一般如果需要个性化上传按钮，就是在此按钮上放了一个透明的文件域，这样点击按钮的时候其实点击了附着在此按钮上面的那个透明的文件域。
--- 共有 3 条评论 ---
ie也不能兼容，ie下的file input，单击“浏览”按钮弹出选择文件窗口，但是文本输入窗口，需要双击才能弹出文件选择窗口
可以的，一直就是这么弄的，各个浏览器都兼容的，这个是最基本的css样式，不管什么浏览器都兼容的。
不能兼容火狐
报告红薯老大，我用UC上OSChina的时候 帖子列表里这篇帖子的标题会显示一个上传文件的框框，你木有过滤掉定义input type=file 样式的方法
互联网 & 发布时间： 23:22:11 & 作者：佚名 &
当我们想要用css美化表单的时候，有两个控件就会和前段人员作对，一个是是大名鼎鼎的select，另一个就是我现在要说说的input type=file
为什么要美化file控件？试想一下，别的孩子都穿戴整齐漂亮，其中两个孩子怎么都不鸟你，太不和谐了。
&&&&原始的file控件是这样的：
&&&&别以为这个是由一个text和一个button组合成的，它是一个控件，html代码为：代码如下: &input type="file" name="file" /& 既然这样我们就用一个text和一个button来显示这个file的样式，html代码是这样： 代码如下: &div class="file-box"& &form action="" method="post" enctype="multipart/form-data"& &input type='text' name='textfield' id='textfield' class='txt' /& &input type='button' class='btn' value='浏览...' /& &input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" /& &input type="submit" name="submit" class="btn" value="上传" /& &/form& &/div& 外面的一层div是为了给里面的input提供位置参考，因为写样式的时候需要相对定位，使真正的file控件覆盖在模拟的上面，然后隐藏掉file控件（即使file控件不可见），所以css代码是这样的： 代码如下: .file-box{ position:width:340px} .txt{ height:22 border:1px solid # width:180} .btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24 width:70} .file{ position: top:0; right:80 height:24 filter:alpha(opacity:0);opacity: 0;width:260px }
效果图：最后留下一个DEMO：点击查看demo
&!DOCTYPE html&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&定义input type="file" 的样式&/title&
&style type="text/css"&
body{ font-size:14}
input{ vertical-align: margin:0; padding:0}
.file-box{ position:width:340px}
.txt{ height:22 border:1px solid # width:180}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24 width:70}
.file{ position: top:0; right:80 height:24 filter:alpha(opacity:0);opacity: 0;width:260px }
&div class="file-box"&
&form action="" method="post" enctype="multipart/form-data"&
&input type='text' name='textfield' id='textfield' class='txt' /&
&input type='button' class='btn' value='浏览...' /&
&input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" /&
&input type="submit" name="submit" class="btn" value="上传" /&
提示：您可以先修改部分代码再运行
大家感兴趣的内容
12345678910
最近更新的内容input[type=file]去掉“未选择任何文件”及样式改进-经验总结-w3h5