Ale*_*art 159 javascript css jquery
我试图使用jQuery触发上传框(浏览按钮).
我现在尝试的方法是:
$('#fileinput').trigger('click');
但它似乎没有用.请帮忙.谢谢.
ada*_*ign 192
这是由于安全限制.
我发现安全限制仅在<input type="file"/>设置为display:none;或者是visbilty:hidden.
所以我尝试通过设置将它定位在视口之外position:absolute,top:-100px;并且它可以工作.
称之为黑客.
希望对你有用.
sle*_*led 105
这对我有用:
JS:
$('#fileinput').trigger('click');
HTML:
<div class="hiddenfile">
<input name="upload" type="file" id="fileinput"/>
</div>
CSS:
.hiddenfile {
width: 0px;
height: 0px;
overflow: hidden;
}
>>>另一个跨浏览器的工作:<<<
想法是在自定义按钮上叠加一个看不见的巨大"浏览"按钮.因此,当用户单击您的自定义按钮时,他实际上是单击本机输入字段的"浏览"按钮.
JS小提琴:http://jsfiddle.net/5Rh7b/
HTML:
<div id="mybutton">
<input type="file" id="myfile" name="upload"/>
Click Me!
</div>
CSS:
div#mybutton {
/* IMPORTANT STUFF */
overflow: hidden;
position: relative;
/* SOME STYLING */
width: 50px;
height: 28px;
border: 1px solid green;
font-weight: bold
background: red;
}
div#mybutton:hover {
background: green;
}
input#myfile {
height: 30px;
cursor: pointer;
position: absolute;
top: 0px;
right: 0px;
font-size: 100px;
z-index: 2;
opacity: 0.0; /* Standard: FF gt 1.5, Opera, Safari */
filter: alpha(opacity=0); /* IE lt 8 */
-ms-filter: "alpha(opacity=0)"; /* IE 8 */
-khtml-opacity: 0.0; /* Safari 1.x */
-moz-opacity: 0.0; /* FF lt 1.5, Netscape */
}
JavaScript的:
$(document).ready(function() {
$('#myfile').change(function(evt) {
alert($(this).val());
});
});
Jho*_*Rey 62
您可以使用LABEL元素ex.
<div>
<label for="browse">Click Me</label>
<input type="file" id="browse" name="browse" style="display: none">//
</div>这将触发输入文件
The*_*uck 16
我在IE8 +,最近的FF和chrome中工作(=测试):
$('#uploadInput').focus().trigger('click');
关键是在点击之前聚焦(否则铬会忽略它).
注意:您需要显示和显示您的输入(如,不是display:none,不是visibility:hidden).我建议(正如之前许多其他人一样)绝对定位输入并将其抛出屏幕.
#uploadInput {
position: absolute;
left: -9999px;
}
Moh*_*han 10
看看我的小提琴.
http://jsfiddle.net/mohany2712/vaw8k/
.uploadFile {
visibility: hidden;
}
#uploadIcon {
cursor: pointer;
}<body>
<div class="uploadBox">
<label for="uploadFile" id="uploadIcon">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Icon_-_upload_photo_2.svg/512px-Icon_-_upload_photo_2.svg.png" width="20px" height="20px"/>
</label>
<input type="file" value="upload" id="uploadFile" class="uploadFile" />
</div>
</body>adardesign在隐藏文件输入元素时忽略了它.我还注意到很多人将元素大小转换为0,或者通过定位和溢出调整将其推出界限.这些都是好主意.
另一种似乎也能很好地工作的方法是将不透明度设置为0.然后你总是可以设置位置以防止它像hide一样偏移其他元素.在任何方向上移动一个近10K像素的元素似乎有点不必要.
对于那些想要一个的人来说,这是一个小例子:
input[type='file']{
position:absolute;
opacity:0;
/* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* For IE5 - 7 */
filter: alpha(opacity=0);
}
只是为了好奇,您可以通过动态创建上传表单和输入文件来执行您想要的操作,而无需将其添加到DOM树中:
$('.your-button').on('click', function() {
var uploadForm = document.createElement('form');
var fileInput = uploadForm.appendChild(document.createElement('input'));
fileInput.type = 'file';
fileInput.name = 'images';
fileInput.multiple = true;
fileInput.click();
});
无需将uploadForm添加到DOM.
事实上，我找到了一个非常简单的方法，那就是：
$('#fileinput').show().trigger('click').hide();
这样，您的文件输入字段就可以在none上显示css 属性，并且仍然赢得交易:)
小智 5
正确的代码:
<style>
.upload input[type='file']{
position: absolute;
float: left;
opacity: 0; /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* For IE5 - 7 */
filter: alpha(opacity=0);
width: 100px; height: 30px; z-index: 51
}
.upload input[type='button']{
width: 100px;
height: 30px;
z-index: 50;
}
.upload input[type='submit']{
display: none;
}
.upload{
width: 100px; height: 30px
}
</style>
<div class="upload">
<input type='file' ID="flArquivo" onchange="upload();" />
<input type="button" value="Selecionar" onchange="open();" />
<input type='submit' ID="btnEnviarImagem" />
</div>
<script type="text/javascript">
function open() {
$('#flArquivo').click();
}
function upload() {
$('#btnEnviarImagem').click();
}
</script>
| 归档时间： |
|
| 查看次数： |
233942 次 |
| 最近记录： |