[英]Jquery trigger('click') and on(change)
我正在尝试设置input = file的样式,因此我将其隐藏并使用按钮代替。 在按钮的单击功能上,我已编写此代码
$('button').click(function() {
$('input[type=file]').trigger('click');
});
但是我也想在选择文件后立即提交表单。 所以我写了
$('input[type=file]').on('change', function() {
// select the form and submit
$(form).submit();
});
当我使用触发器隐藏输入[type = file]时,这不起作用,但是当我显示选择文件时。 onChange函数开始工作。
我需要知道input [type = file]隐藏并且仅使用触发器提交表单。
我会建议一种比触发click
更好的方法。 使用label
作为input
并将按钮的所有样式应用于该标签。
HTML:
<input type="file" name="file" id="file_in" class="hidden" />
<label for="file_in" class="button">Add file</label>
CSS:
.hidden {
display: none;
}
.button {
background: #0f0;
}
jQuery:
$('input[type=file]').on('change', function() {
// select the form and submit
$(form).submit();
});
// You can completely avoid the `trigger` code.
您甚至都不需要按钮。 您只能具有输入字段,并使用:after
按钮的样式:after
可以不透明地将其隐藏。 请注意:after
与IE7及更早版本不兼容:
的HTML
<form>
<input type="file">
</form>
的CSS
input[type="file"] {
margin:19px;
position:absolute;
left:0;
top:0;
z-index:2;
font-size:31px;
clip:rect(0px, 123px, 40px, 0px);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
}
form:after {
content:'upload file';
font:small-caps 15px Georgia;
letter-spacing:1px;
border-radius:10px;
border:1px solid #eee;
width:100px;
padding:10px;
margin:20px;
text-align:center;
position:absolute;
left:0;
top:0;
z-index:1;
background-color:#f8f8f8;
}
form {
color:#666;
}
form:hover:after {
background-color:#f3f3f3!important;
color:#c00;
}
jQuery查询
$('input[type=file]').on('change', function () {
$(form).submit();
});
这是演示: http : //jsfiddle.net/kcKqX/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.