使用jQuery从input [type ='file']获取文件名

Question

这是上传的表格.

<form class="alert alert-info">
    <div>
        <b id = "select_file" class="span3" style="font-weight: bold; cursor: pointer; ">Please select image</b>
        <input class="span3" type="file" name="image_file" id="image_file" style="display:none " />
        <input disabled="true" type="button" value="Upload image" class="btn" />
    </div>
</form>

我使用以下脚本打开一个包含文件的窗口.我想在中显示一个文件名<b id = 'select_file'>.

我怎样才能做到这一点？

$('#select_file').click(function(){
    var _this = $(this);
    $('#image_file').show().focus().click().hide();

    var filename = $('#image_file').val();
    _this.html(filename);

    $('.btn').attr('disabled', false);
});

Answer 1

获取文件名非常简单.正如matsko指出的那样,出于安全原因,您无法在用户的计算机上获取完整的文件路径.

var file = $('#image_file')[0].files[0]
if (file){
  console.log(file.name);
}

Answer 2

您必须以这种方式对change事件执行input type file此操作:

$('#select_file').click(function() {
    $('#image_file').show();
    $('.btn').prop('disabled', false);
    $('#image_file').change(function() {
        var filename = $('#image_file').val();
        $('#select_file').html(filename);
    });
});?

Answer 3

这没有jQuery功能.您必须访问DOM元素并检查files属性.

document.getElementById("image_file").files[0];

要么

$('#image_file')[0].files[0]

Answer 4

这对我来说是一个非常重要的问题,因为我的网站是多语言的.所以这是我在Firefox和Chrome中测试的结论.

jQuery触发器派上用场.

所以这隐藏了标准的无聊type=file标签.您可以放置​​任何您想要的标签并进行格式化.我从http://demo.smarttutorials.net/ajax1/定制了一个脚本.该脚本允许多个文件上传和缩略图预览,并使用PHP和MySQL.

<form enctype="multipart/form-data" name='imageform' role="form"    ="imageform" method="post" action="upload_ajax.php">
    <div class="form-group">
        <div id="select_file">Select a file</div>
        <input class='file' type="file" style="display: none " class="form-control" name="images_up" id="images_up" placeholder="Please choose your image">
        <div id="my_file"></div>
        <span class="help-block"></span>
    </div>
    <div id="loader" style="display: none;">
        Please wait image uploading to server....
    </div>
    <input type="submit" value="Upload" name="image_upload" id="image_upload" class="btn"/>
</form>

$('#select_file').click(function() {
    $('#images_up').trigger('click');
    $('#images_up').change(function() {
        var filename = $('#images_up').val();
        if (filename.substring(3,11) == 'fakepath') {
            filename = filename.substring(12);
        } // Remove c:\fake at beginning from localhost chrome
        $('#my_file').html(filename);
   });
});

Answer 5

尝试使用jQuery从输入[type ='file']获取文件名。

<script type="text/javascript">
    $(document).ready(function(){
        $('input[type="file"]').change(function(e){
            var fileName = e.target.files[0].name;
            alert('The file "' + fileName +  '" has been selected.');
        });
    });
</script>

取自@jQueryPot