小开

我会使用上传或上传。他们需要闪存，但做任何你想没有麻烦。

任何基于 <input type="file">的解决方案，试图通过点击实际控件以外的方式触发“打开文件”对话框，出于安全原因，可以随时从浏览器中删除。(I 好好想想在当前版本的 FF 和 IE 中，不可能再以编程方式触发该事件。)

小开

实际上它可以在纯 CSS 中完成，而且非常简单..。

HTML 代码

<label class="filebutton">
Browse For File!
<span><input type="file" id="myfile" name="myfile"></span>
</label>

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(这样您就可以看到正在做什么!)

请确保跨浏览器进行测试，因为它们都会使输入按钮的大小略有不同。

小开

通过 CSS 可见性，输入本身是隐藏的:。

然后你可以有任何元素，你希望-锚或形象。.当单击锚点/图像时，触发对隐藏输入字段的单击-选择文件的对话框将出现。

编辑: 实际上它可以在 Chrome 和 Safari 中工作，我只是注意到在 FF4Beta 中并不是这样

小开

这对我很有效:

.image-upload>input {
display: none;
}

<div class="image-upload">
<label for="file-input">
<img src="https://icons.iconarchive.com/icons/dtafalonso/android-lollipop/128/Downloads-icon.png"/>
</label>


<input id="file-input" type="file" />
</div>

基本上，标签的为了属性使得 单击标签与单击指定的输入相同。

另外，display 属性设置为 none 会使文件输入根本不被呈现，从而干净利落地隐藏它。

在 Chrome 中测试过，但是根据网络测试，应该可以在所有主流浏览器上工作。 :)

编辑: 在这里添加了 jSFiddle: < a href = “ https://JSFiddle.net/c5s42vdz/”rel = “ norefrer”> https://JSFiddle.net/c5s42vdz/

小开

你可以放一张图片，然后这样做:

HTML:

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

JQuery:

$("#upfile1").click(function () {
$("#file1").trigger('click');
});

警告 : 在 IE9和 IE10中，如果你通过 javascript 触发文件输入的 onclick，表单会被标记为“危险”，不能用 javascript 提交，不确定是否可以按照传统方式提交。

小开

工作守则:

只是隐藏输入部分，像这样做。

<div class="ImageUpload">
<label for="FileInput">
<img src="../../img/Upload_Panel.png" style="width: 18px; margin-top: -316px; margin-left: 900px;"/>
</label>


<input id="FileInput" type="file" onchange="readURL(this,'Picture')" style="cursor: pointer;  display: none"/>
</div>

小开

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

超文本标示语言

<label for="FileInput">
<img src="tools/img/upload2.png" style="cursor:pointer" onmouseover="this.src='tools/img/upload.png'" onmouseout="this.src='tools/img/upload2.png'" alt="Injaz Msila" style="float:right;margin:7px" />
</label>
<form action="upload.php">
<input type="file" id="FileInput" style="cursor: pointer;  display: none"/>
<input type="submit" id="Up" style="display: none;" />
</form>

JQuery

<script type="text/javascript">
$( "#FileInput" ).change(function() {
$( "#Up" ).click();
});
</script>

小开

        form input[type="file"] {
display: none;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>


<head>
<title>Simple File Upload</title>
<meta name="" content="">
</head>


<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<label for="fileToUpload">
<img src="http://s3.postimg.org/mjzvuzi5b/uploader_image.png" />
</label>
<input type="File" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
</body>


</html>

运行 SNIPPET 或者只是复制上面的代码并执行。你会得到你想要的。没有 javascript 非常简单有效。好好享受吧！

小开

其实很简单，你可以试试这个:

$("#image id").click(function(){
$("#input id").click();
});

小开

很棒的解决方案通过@hardset, 但是我做了一些改进，使其能够在 Windows 中使用 Safari (5.1.7)

.image-upload > input {
visibility:hidden;
width:0;
height:0
}

<div class="image-upload">
<label for="file-input">
<img src="https://via.placeholder.com/300x300.png?text=UPLOAD" style="pointer-events: none"/>
</label>


<input id="file-input" type="file" />
</div>

我已经使用 visibility: hidden, width:0而不是 display: none的狩猎问题，并增加了 pointer-events: none在 img标签，使其工作，如果输入文件类型标签是在 FORM 标签。

似乎在所有主流浏览器上都对我有效。

希望能帮到别人。

小开

在过去的十年中，我遇到了很多隐藏的和看不见的输入的问题，有时事情比我们想象的要简单得多。

我有一个小的愿望与 IE 5,6,7,8和9不支持不透明，因此文件输入将涵盖上传图像，但下面的 CSS 代码已经解决了这个问题。

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);

下面的剪切是在 chrome 上测试的，IE 5,6,7,8,9,10 IE 5唯一的问题是它不支持自动边距。

运行代码片段，只需复制并粘贴 CSS 和 HTML，并根据需要修改大小。

.file-upload{
height:100px;
width:100px;
margin:40px auto;
border:1px solid #f0c0d0;
border-radius:100px;
overflow:hidden;
position:relative;
}
.file-upload input{
position:absolute;
height:400px;
width:400px;
left:-200px;
top:-200px;
background:transparent;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.file-upload img{
height:70px;
width:70px;
margin:15px;
}

<div class="file-upload">
<!--place upload image/icon first !-->
<img src="https://i.stack.imgur.com/dy62M.png" />
<!--place input file last !-->
<input type="file" name="somename" />
</div>

小开

比编写 JS 更好的方法是使用原生的, 结果比建议的要轻:

<label>
<img src="my-image.png">
<input type="file" name="myfile" style="display:none">
</label>

这样，label自动连接到隐藏的输入。点击标签就像点击字段。

小开

您可以用新选择的图像自动替换图像。

<div class="image-upload">
<label for="file-input">
<img id="previewImg" src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg" style="width: 100px; height: 100px;" />
</label>


<input id="file-input" type="file" onchange="previewFile(this);" style="display: none;" />
</div>








<script>
function previewFile(input){
var file = $("input[type=file]").get(0).files[0];


if(file){
var reader = new FileReader();


reader.onload = function(){
$("#previewImg").attr("src", reader.result);
}


reader.readAsDataURL(file);
}
}
</script>

小开

<script type="text/javascript">
function upl() {
var fileSelector = document.createElement('input');
fileSelector.setAttribute('type', 'file');
fileSelector.setAttribute('name', 'uploimg');
fileSelector.setAttribute('accept', 'image/*');
fileSelector.click();
fileSelector.style.display = "none";


fileSelector.onchange = function() {
document.getElementById("indicator").innerHTML = "Uploaded";
};


document.getElementById("par_form").appendChild(fileSelector);


}
</script>


<form id="par_form">
<img src="image_url" onclick="upl()"><br>
<span id="indicator"></span><br>
<input type="submit">
</form>

将 input type = file 替换为图像

超文本标示语言

JQuery