Javascript 如何使链接充当文件输入

How to make a link act as a file input

提问by David542

I have a link,

我有链接，

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

And if clicked, I want it to act as an browse file input

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

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

How would I accomplish this?

我将如何做到这一点？

回答by The Alpha

HTML

HTML

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

CSS

CSS

#upload{
    display:none
}

JS

JS

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

?DEMO.

?演示。

回答by Chamika Sandamal

following will solved the problem

以下将解决问题

html

html

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

css

css

#upload-file{
    display: none;
}?

js

js

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

http://jsfiddle.net/WXBKj/

http://jsfiddle.net/WXBKj/

回答by Jamie Armour

HTML Only

仅 HTML

Here's a pretty simple answer that works with no CSS, Javascript/jQuery and doesn't rely on any framework infrastructure.

这是一个非常简单的答案，它不需要 CSS、Javascript/jQuery，也不依赖于任何框架基础设施。

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

or even simpler

甚至更简单

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

回答by Benjamin Arthuys

You can do it without Javascript like this. cross-browser solution with attribute for:

您可以像这样在没有 Javascript 的情况下做到这一点。具有属性的跨浏览器解决方案for：

DEMO

演示

HTML

HTML

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

CSS

CSS

#inputUpload {
    display: none;
}

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

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

DEMO

演示

回答by Ivan

You can have a hidden <input>tag that you can then call $('#upload').click()on in order to simulate a click.

你可以有一个隐藏的<input>标签，然后你可以调用$('#upload').click()它来模拟点击。

Or, you can have a hidden <input>tag that has an id, and then just add a label attribute to your link.

或者，您可以有一个<input>带有 id的隐藏标签，然后只需向您的链接添加一个标签属性。

回答by Ahsan Rathod

EDITED:

编辑：

See This Demo: http://jsfiddle.net/rathoreahsan/s6Mjt/

看到这个演示：http: //jsfiddle.net/rathoreahsan/s6Mjt/

JQUERY:

查询：

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

HTML

HTML

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

CSS

CSS

#upload-file {
    display:none;
}

OR

或者

You may use nice plugins like this:

你可以使用这样的好插件：

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

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

回答by Günay Gültekin

In Angular 6, you can do like this,

在 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>

When you click li html tag, the input button's click is triggered."hidden" attribute makes invisible.

当您点击 li html 标签时，会触发输入按钮的点击。" hidden" 属性使不可见。

回答by coolguy

The best one http://valums.com/ajax-upload/

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