Question

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

我可以触发文件上传。但未能同时检索其名称。

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;
}

因此，现在点击链接上传文件，即会弹出文件上传。但是我无法显示上传文件的名称（就像普通文件上传一样）。

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

Answer 1

尝试

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

Answer 2

当您单击a标签时，您打开浏览窗口并已设置文件输入的值，但尚未填写。您需要等待文件被选中。您可以使用on('change')：

执行此操作

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

请参阅Fiddle

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

2 个答案: