Question

我想尝试使用链接触发隐藏的输入文件按钮，但在我点击链接后我想要获取所选文件。

CSS

{#upload {display:none;}}

jQuery

$(".file-image").on('click', function(e){
    e.preventDefault();
    $("#upload:hidden").trigger('click');
   console.log($("#upload"));             
});

HTML：

<a href="#" class="file-image">Add image</a>';
<input id="upload" type="file"/>';

如何获取上传按钮所选文件名的值？

在控制台中，我看到该对象就像

[input#fileupload, context:document, selector: "#upload"]
[0]: input#upload
...
...

value: c:\temp\file.jpg //and this value seems to be correct
...

我尝试了$("#upload")[0]['value']

Answer 1

您可以使用：

$("#upload")[0].files;

Answer 2

您需要的是FileReader()对象的readAsDataURL方法。

这是我用过的功能，你可以画出参考...

        function readURL(input) {

            num = jQuery(input).attr("data-opti");
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {

                    jQuery('#preview' + num).attr('src', e.target.result);
                    var logoHeight = jQuery('#preview' + num).height();
                    if (logoHeight < 104) {
                        var margintop = (104 - logoHeight) / 2;
                        jQuery('#preview' + num).css('margin-top', margintop);
                    }
                }

                reader.readAsDataURL(input.files[0]);
            } else {
              // no files selected it seems
            }
        }
        jQuery(".imageinput").change(function () {
            readURL(this);
        });

这可用于在文件上传之前显示图像的预览，因此增强UX是一个非常好的功能。

如何从文件按钮获取seletced文件名？

2 个答案: