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

您必须以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元素并检查文件属性。

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

Answer 6

您可以访问要将参数传递给回调函数的属性（如evt），然后使用它访问文件（evt.target.files[0].name）：

$("document").ready(function(){
  $("main").append('<input type="file" name="photo" id="upload-photo"/>');
  $('#upload-photo').on('change',function(evt) {
    alert(evt.target.files[0].name);
  });
});

Answer 7

使用Bootstrap

从输入字段中删除 form-control-file 类，以避免不必要的水平滚动条

尝试一下！

$('#upload').change(function() {
    var filename = $('#upload').val();
    if (filename.substring(3,11) == 'fakepath') {
        filename = filename.substring(12);
    } // For Remove fakepath
    $("label[for='file_name'] b").html(filename);
    $("label[for='file_default']").text('Selected File: ');
    if (filename == "") {
        $("label[for='file_default']").text('No File Choosen');
    }
});

.custom_file {
  margin: auto;
  opacity: 0;
  position: absolute;
  z-index: -1;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
   <label for="upload" class="btn btn-sm btn-primary">Upload Image</label>
    <input type="file" class="text-center form-control-file custom_file" id="upload" name="user_image">
    <label for="file_default">No File Choosen </label>
    <label for="file_name"><b></b></label>
</div>

Answer 8

var file = $('#YOURID > input[type="file"]'); file.value; // filename will be,

在Chrome中，如果没有选择文件，它将类似于C:\fakepath\FILE_NAME或undefined。

浏览器不显示本地计算机的文件结构是一种限制或意图。

Answer 9

$("#filetosend").prop('files')[0]

Answer 10

如果选择了另外1个文件：

$("input[type="file"]").change(function() {
   var files = $("input[type="file"]").prop("files");
   var names = $.map(files, function(val) { return val.name; });
   $(".some_div").text(names);
});

files将是FileList对象。 names是一个字符串数组（文件名）。

Answer 11

由于安全原因，这是不可能的。至少在现代浏览器上没有。这是因为任何访问文件路径的代码都被认为是危险的并且存在安全风险。要么您最终得到一个未定义的值，将会抛出一个空字符串或错误。

提交文件表单后，浏览器会暂时将文件缓冲到上传目录中，并且只提交该文件的临时文件名和该文件的基本名称。

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

11 个答案: