Question

我有一个链接，

<a id="upload-file">Upload your photo</a>

如果点击，我希望它充当浏览文件输入

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

我将如何做到这一点？

Answer 1

<强> HTML

<input id="upload" type="file"/>
<a href="" id="upload_link">Upload your photo</a>

<强> CSS

#upload{
    display:none
}

<强> JS

$(function(){
    $("#upload_link").on('click', function(e){
        e.preventDefault();
        $("#upload:hidden").trigger('click');
    });
});

DEMO.

Answer 2

以下将解决问题

HTML

<input id="upload-file" type="file"/>
<a id="fileupload">Upload your photo</a>

CSS

#upload-file{
    display: none;
}

JS

$("#fileupload").click(function(){
    $("#upload-file").click();
});

http://jsfiddle.net/WXBKj/

Answer 3

您可以使用隐藏的<input>标记，然后可以调用$('#upload').click()以模拟点击。

或者，您可以使用具有ID的隐藏<input>标记，然后只需在链接中添加标签属性。

Answer 4

仅HTML

这是一个非常简单的答案，它不使用CSS，Javascript / jQuery，也不依赖任何框架基础结构。

<label>
  <input type="file" style="display: none;">
  <a>Upload Photo link</a>
</label>

或更简单

<label>
  <input type="file" style="display: none;">
  Upload Photo link
</label>

Answer 5

编辑：

参见本演示：http://jsfiddle.net/rathoreahsan/s6Mjt/

<强> JQUERY：

$("#upload").click(function(){
    $("#upload-file").trigger('click');
});

<强> HTML

<a href="javascript:void(0)" id="upload">Upload your photo</a>
<input id="upload-file" type="file"/>

<强> CSS

#upload-file {
    display:none;
}

或

你可以使用这样漂亮的插件：

http://blueimp.github.com/jQuery-File-Upload/

Answer 6

在Angular 6中，您可以这样做，

<li class="list-group-item active cursor-pointer" (click)="file.click()">
    <i class="fas fa-cloud-upload-alt"></i> Upload <input type="file" #file hidden />
  </li>

单击li html标记时，将触发输入按钮的单击。“ 隐藏”属性将不可见。

Answer 7

您可以在没有Java脚本的情况下执行此操作。属性为for的跨浏览器解决方案：

DEMO

HTML

<label for="inputUpload" class="custom-file-upload">Upload your file</label>
<input id="inputUpload" type="file" />

CSS

#inputUpload {
    display: none;
}

.custom-file-upload {
    cursor: pointer;
    font-size: inherit;
    color: #0c090d;
}

.custom-file-upload:hover {
    text-decoration: underline;
}

DEMO

Answer 8

最好的一个 http://valums.com/ajax-upload/

如何使链接充当文件输入

8 个答案: