选择文件后获取输入文件的名称答案

【问题标题】：Get the name of input file once the file is chosen选择文件后获取输入文件的名称
【发布时间】：2014-03-14 11:42:48
【问题描述】：

我想要的是点击一个链接，应该触发文件上传，并在选择文件时，在链接的位置，应该出现上传文件的名称。并且在单击按钮时应提交表单。

我能够触发文件上传。但未能同时检索到它的名字。

JQuery：

$(document).ready(function()
{
    $('#uploadFile').click(function(e){
      $('#fileUploadField').click();
      e.preventDefault();
      $('#uploadFile').html($('input[type=file]').val());
     });
});

表单（我正在使用 Codeigniter）：

<?php echo form_open("member/uploadphoto","id='photoform'")?>
<a href="#" id="uploadFile">Upload File</a>
<input type="file" name="file" id="fileUploadField" />
<input type="submit" value="Upload">
<?php echo form_close();?>

在CSS中：

#fileUploadField{
    opacity: 0;
}

所以，现在点击链接上传文件，文件上传弹出窗口来了。但我无法显示上传文件的名称（就像普通文件上传一样）。

请帮我解决这个问题。提前致谢。

【问题讨论】：

标签： jquery codeigniter jquery-file-upload

【解决方案1】：

试试

$(document).ready(function () {
    $('#uploadFile').click(function (e) {
        $('#fileUploadField').click();
        e.preventDefault();
    });
    $('#fileUploadField').change(function () {
        $('#uploadFile').text(this.value);
    });
});

【讨论】：

@Jenz 很高兴它有帮助:)

【解决方案2】：

当您单击a 标记时，您会打开浏览窗口并且已经设置了文件输入的值，该值还没有被填充。您需要等待选择文件。你可以通过on('change') 做到这一点：

$(document).ready(function () {
    $('#uploadFile').click(function (e) {
        $('#fileUploadField').click();
    });
    $('#fileUploadField').on('change', function () {
        $('#uploadFile').html($('input[type=file]').val());
    });
});

见Fiddle

【讨论】：