java 替换input_用图像替换input type = file

回答(10)

2 years ago

这对我很有用：

造型：

.image-upload > input

{

display: none;

}

基本上，标签的 for 属性使它成为 clicking the label is the same as clicking the specified input .

此外，display属性设置为none使得文件输入根本不会被渲染，使其隐藏得很好 .

在Chrome中测试但根据网络应该适用于所有主流浏览器 . :)

2 years ago

实际上它可以在纯css中完成，而且很容易......

HTML代码

Browse For File!

CSS样式

label.filebutton {

width:120px;

height:40px;

overflow:hidden;

position:relative;

background-color:#ccc;

}

label span input {

z-index: 999;

line-height: 0;

font-size: 50px;

position: absolute;

top: -2px;

left: -700px;

opacity: 0;

filter: alpha(opacity = 0);

-ms-filter: "alpha(opacity=0)";

cursor: pointer;

_cursor: hand;

margin: 0;

padding:0;

}

我们的想法是将输入绝对放在标签内 . 将输入的字体大小设置为大的，这将增加“浏览”按钮的大小 . 然后使用负左/顶部属性进行一些试验和错误，将输入浏览按钮定位在标签后面 .

定位按钮时，将alpha设置为1.完成后将其设置为0(这样你就可以看到你在做什么！)

确保您在浏览器之间进行测试，因为它们都会使输入按钮的大小略有不同 .

2 years ago

@hardsetting提供了很好的解决方案，但我做了一些改进，使它在Windows中与Safari(5.1.7)一起使用

.image-upload > input {

visibility:hidden;

width:0;

height:0

}

我使用“visibility：hidden，width：0”而不是“display：none”来表示safari问题，并在img标签中添加了“pointer-events：none”，以便在输入文件类型标签位于FORM标签时使其正常工作 . 似乎在所有主流浏览器中都适合我 . 希望它可以帮助某人 .

2 years ago

我会用SWFUpload或Uploadify . 他们需要Flash，但你可以毫无困难地做你想做的一切 .

除了单击实际控件之外，尝试触发"open file"对话框的任何基于 的解决方法都可以随时从浏览器中删除 . (我认为在当前版本的FF和IE中，不可能以编程方式触发该事件 . )

2 years ago

如果我明白你的意思，这是我的方法

HTML

jQuery

$( "#FileInput" ).change(function() {

$( "#Up" ).click();

});

2 years ago

它非常简单你可以尝试这个：

$("#image id").click(function(){

$("#input id").click();

});

2 years ago

您可以改为放置图像，并按以下方式执行：

HTML：

JQuery的：

$("#upfile1").click(function () {

$("#file1").trigger('click');

});

CAVEAT ：在IE9和IE10中如果你通过javascript触发文件输入中的onclick，表单会被标记为'dangerous'并且无法使用javascript进行下限，不确定是否可以提交传统 .

2 years ago

form input[type="file"] {

display: none;

}

Simple File Upload

Select image to upload:

RUN SNIPPET or Just copy the above code and execute. You will get what you wanted. Very simple and effective without javascript. Enjoy!!!

2 years ago

输入本身隐藏了CSS可见性：隐藏 .

然后你可以拥有你想要的任何元素 - 锚点或图像..当点击锚点/图像时，触发点击隐藏的输入字段 - 将出现用于选择文件的对话框 .

编辑：实际上它适用于Chrome和Safari，我只是注意到FF4Beta不是这样

2 years ago

Working Code:

只是隐藏输入部分，并这样做 .