Как заставить ссылку действовать как ввод файла

У меня есть ссылка,

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

И если щелкнуть, я хочу, чтобы он выступал в качестве входного файла для просмотра

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

Как бы это сделать?

Ответы

HTML

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

CSS

#upload{
    display:none
}

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

после этого будет решена проблема

HTML

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

CSS

#upload-file{
    display: none;
}

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

У вас может быть скрытый тег <input>, который вы можете вызвать $('#upload').click() для имитации щелчка.

Или вы можете иметь скрытый тег <input> с идентификатором, а затем просто добавить атрибут метки в свою ссылку.

Редакция:

Смотрите эту демонстрацию: 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;
}

ИЛИ

Вы можете использовать красивые плагины, как это: