jquery - 使用 jQuery 从输入 [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);
});

score 91 · Accepted Answer

获取文件名相当容易。正如 matsko 指出的那样，出于安全原因，您无法获取用户计算机上的完整文件路径。

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

score 52 · Accepted Answer

您必须对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);
    });
});

score 9 · Accepted Answer

没有用于此的 jQuery 函数。您必须访问DOM元素并检查 files 属性。

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

或者

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

score 6 · Accepted Answer

这对我来说是一个非常重要的问题，以便我的网站支持多语言。所以这是我在 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);
   });
});

score 5 · Accepted Answer

尝试使用 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

score 3 · Accepted Answer

使用引导

从输入字段中删除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>

score 1 · Accepted Answer

1

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

于 2017-03-05T13:47:29.060 回答

score 1 · Accepted Answer

您可以访问要将参数传递给回调函数的属性（例如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);
  });
});

score 0 · Accepted Answer

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

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

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

score -1 · Accepted Answer

如果选择更多 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是一个字符串数组（文件名）。

score -2 · Accepted Answer

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

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

jquery - 使用 jQuery 从输入 [type='file'] 获取文件名

11 回答 11

Related

Reference