Bootstrap 4文件输入

时间：2017-04-06 08:52:02

标签： javascript jquery css twitter-bootstrap bootstrap-4

我正在努力使用bootstrap 4文件浏览器。如果我使用自定义文件控件，我会一直看到选择文件值。 https://v4-alpha.getbootstrap.com/components/forms/#file-browser

我想在选择文件后更改选择文件的值。这个值实际上隐藏在css .custom-file-control:lang(en)::after中，我不知道如何在javascript中访问和更改它。我可以像这样得到所选文件的值：

document.getElementById("exampleInputFile").value.split("\\").pop();

我不需要改变

.custom-file-control:lang(en)::after {
    content: "Choose file...";
}

不知何故

link：http://codepen.io/Matoo125/pen/LWobNp

16 个答案:

答案 0 :(得分：48)

我刚刚解决了这个问题

HTML：

<div class="custom-file">
   <input id="logo" type="file" class="custom-file-input">
   <label for="logo" class="custom-file-label text-truncate">Choose file...</label>
</div>

JS：

$('.custom-file-input').on('change', function() { 
   let fileName = $(this).val().split('\\').pop(); 
   $(this).next('.custom-file-label').addClass("selected").html(fileName); 
});

注意：感谢ajax333221提及.text-truncate类，如果所选文件名太长，将隐藏标签内的溢出。

答案 1 :(得分：46)

2018年更新

Bootstrap 4.1 +

现在在Bootstrap 4.1中，“选择文件...”占位符文本设置在 custom-file-label ：

<div class="custom-file" id="customFile" lang="es">
        <input type="file" class="custom-file-input" id="exampleInputFile" aria-describedby="fileHelp">
        <label class="custom-file-label" for="exampleInputFile">
           Select file...
        </label>
</div>

更改“浏览”按钮文本需要一些额外的CSS或SASS。另请注意language translation works如何使用lang=""属性。

.custom-file-input ~ .custom-file-label::after {
    content: "Button Text";
}

https://www.codeply.com/go/gnVCj66Efp（CSS）
https://www.codeply.com/go/2Mo9OrokBQ（SASS）

另一个Bootstrap 4.1选项

或者您可以使用此custom file input plugin

https://www.codeply.com/go/uGJOpHUd8L/file-input

Bootstrap 4 Alpha 6 （原始答案）

我认为这里有两个不同的问题.. 

<label class="custom-file" id="customFile">
        <input type="file" class="custom-file-input">
        <span class="custom-file-control form-control-file"></span>
</label>

1 - 如何更改初始占位符和按钮文字

在Bootstrap 4中，初始占位符值在custom-file-control上设置，并带有基于HTML语言的CSS伪::after元素。初始文件按钮（实际上不是按钮，但看起来像一个按钮）是使用CSS伪::before元素设置的。这些值可以用CSS覆盖.. 

#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
}

#customFile .custom-file-control:lang(en)::before {
  content: "Click me";
}

2 - 如何获取所选的文件名值，并更新输入以显示值。

选择文件后，可以使用JavaScript / jQuery获取该值。

$('.custom-file-input').on('change',function(){
    var fileName = $(this).val();
})

但是，由于输入的占位符文本是伪元素there's no easy way to manipulate this with Js/jQuery。但是，一旦选择了文件，您就可以拥有另一个隐藏伪内容的CSS类... 

.custom-file-control.selected:lang(en)::after {
  content: "" !important;
}

选择文件后，使用jQuery在.selected上切换.custom-file-control类。这将隐藏初始占位符值。然后将文件名值放在.form-control-file span ...

中 
$('.custom-file-input').on('change',function(){
  var fileName = $(this).val();
  $(this).next('.form-control-file').addClass("selected").html(fileName);
})

然后，您可以根据需要处理文件上传或重新选择。

Demo on Codeply (alpha 6)

答案 2 :(得分：6)

更改文件浏览器的语言：
作为ZimSystem提到的内容（覆盖CSS）的替代方案，引导文档建议使用更优雅的解决方案：通过在SCSS中添加语言来构建自定义引导程序样式
在此处阅读：https://getbootstrap.com/docs/4.0/components/forms/#file-browser

注意：您需要在文档中正确设置lang属性才能使其正常工作

更新文件选择的值：
你可以用这样的内联js来做到这一点：

   <label class="custom-file">
      <input type="file" id="myfile" class="custom-file-input" onchange="$(this).next().after().text($(this).val().split('\\').slice(-1)[0])">
      <span class="custom-file-control"></span>
   </label>

注意：.split('\\').slice(-1)[0]部分删除 C：\ fakepath \ 前缀

答案 3 :(得分：4)

从 Bootstrap 4.3 开始，您可以在标签标记内更改占位符和按钮文本：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="custom-file">
  <input type="file" class="custom-file-input" id="exampleInputFile">
  <label class="custom-file-label" for="exampleInputFile" data-browse="{Your button text}">{Your placeholder text}</label>
</div>

答案 4 :(得分：2)

以防万一，如果您不需要jquery解决方案

<label class="custom-file">
      <input type="file" id="myfile" class="custom-file-input" onchange="this.nextElementSibling.innerText = this.files[0].name">
      <span class="custom-file-control"></span>
</label>

答案 5 :(得分：2)

以下是答案，其中蓝色 框阴影，边框，轮廓已删除 ，并且在引导程序的自定义文件输入中显示了文件名修复选择文件名，如果未选择任何文件，则显示未选择文件。

    $(document).on('change', 'input[type="file"]', function (event) { 
        var filename = $(this).val();
        if (filename == undefined || filename == ""){
        $(this).next('.custom-file-label').html('No file chosen');
        }
        else 
        { $(this).next('.custom-file-label').html(event.target.files[0].name); }
    });
    input[type=file]:focus,.custom-file-input:focus~.custom-file-label {
        outline:none!important;
        border-color: transparent;
        box-shadow: none!important;
    }
    .custom-file,
    .custom-file-label,
    .custom-file-input {
        cursor: pointer;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container py-5">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">Upload</span>
      </div>
      <div class="custom-file">
        <input type="file" class="custom-file-input" id="inputGroupFile01">
        <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
      </div>
    </div>
    </div>

答案 6 :(得分：1)

我只需将其添加到我的CSS文件中即可使用

.custom-file-label::after{content: 'New Text Button' !important;}

答案 7 :(得分：1)

引导程序4

更多详细信息为https://imgur.com/a/yT8KIzw here

今天，我需要创建一个具有多个上传文件选项的浏览按钮，以上所有摘录对我来说都是不利的。

当我选择多个文件时，https://learncodeweb.com/snippets/browse-button-in-bootstrap-4-with-select-image-preview/也不起作用。

我想出的这段代码可能会在将来对其他人有所帮助。

<div class="container mt-5">
  <h1 class="text-center">Bootstrap 4 Upload multiple files</h1>
  <div class="col-sm-4 mr-auto ml-auto border p-4">
  <form method="post" enctype="multipart/form-data" action="upload.php">
    <div class="form-group">
      <label><strong>Upload Files</strong></label>
      <div class="custom-file">
        <input type="file" name="files[]" multiple class="custom-file-input" id="customFile">
        <label class="custom-file-label" for="customFile">Choose file</label>
      </div>
    </div>
    <div class="form-group">
      <button type="submit" name="upload" value="upload" id="upload" class="btn btn-block btn-dark"><i class="fa fa-fw fa-upload"></i> Upload</button>
    </div>
  </form>
</div>

下面是js代码。

$(document).ready(function() {
  $('input[type="file"]').on("change", function() {
    let filenames = [];
    let files = document.getElementById("customFile").files;
    if (files.length > 1) {
      filenames.push("Total Files (" + files.length + ")");
    } else {
      for (let i in files) {
        if (files.hasOwnProperty(i)) {
          filenames.push(files[i].name);
        }
      }
    }
    $(this)
      .next(".custom-file-label")
      .html(filenames.join(","));
  });
});

给出了工作代码示例official Bootstrap example。

here

答案 8 :(得分：1)

您可以尝试在给定的代码段下方显示从文件输入类型选择的文件名。

document.querySelectorAll('input[type=file]').forEach( input => {
    input.addEventListener('change', e => {
        e.target.nextElementSibling.innerText = input.files[0].name;
    });
});

答案 9 :(得分：0)

基于@Elnoor答案的解决方案，但可以处理多个文件上传表单输入，并且没有“ fakepath hack”：

HTML：

<div class="custom-file">
    <input id="logo" type="file" class="custom-file-input" multiple>
    <label for="logo" class="custom-file-label text-truncate">Choose file...</label>
</div>

JS：

$('input[type="file"]').on('change', function () {
    let filenames = [];
    let files = document.getElementById('health_claim_file_form_files').files;

    for (let i in files) {
        if (files.hasOwnProperty(i)) {
            filenames.push(files[i].name);
        }
    }

    $(this).next('.custom-file-label').addClass("selected").html(filenames.join(',    '));
});

答案 10 :(得分：0)

借助jquery，可以像这样完成操作。 代码：

$("input.custom-file-input").on("change",function(){if(this.files.length){var filename=this.file[0].name;if(filename.length>23){filename=filename.substr(0,11)+"..."+filename.substr(-10);}$(this).siblings(".custom-file-label").text(filename);}});

答案 11 :(得分：0)

Bootstrap 4.4：

显示一个{ "authorities": [ { "authority": "ROLE_USER", "attributes": { "at_hash": "jVwoBv3AueI07-VJqKN0-A", "sub": "108161422188958518395", "email_verified": true, "iss": "https://accounts.google.com", "given_name": "test", "locale": "en", "nonce": "4ByS7UbIYimkIOJvHUznNQGZ42GxgYh9tCM1K4vKfYc", "picture": "https://lh3.googleusercontent.com/a-/AOh14Gh6AHe4iGXQ9XKVgfVV35w31UbSzKs84xUYuNNS=s96-c", "aud": [ "693417856482-slejtj57gb2nrcehe82ih45o2vdhkj5t.apps.googleusercontent.com" ], "azp": "693417856482-slejtj57gb2nrcehe82ih45o2vdhkj5t.apps.googleusercontent.com", "name": "test testing", "exp": 1590535843, "family_name": "testing", "iat": 1590532243, "email": "test@gamil.com" }, "idToken": { "tokenValue": "123", "issuedAt": 1590532243, "expiresAt": 1590535843, "claims": { "at_hash": "jVwoBv3AueI07-VJqKN0-A", "sub": "108161422188958518395", "email_verified": true, "iss": "https://accounts.google.com", "given_name": "test", "locale": "en", "nonce": "4ByS7UbIYimkIOJvHUznNQGZ42GxgYh9tCM1K4vKfYc", "picture": "https://lh3.googleusercontent.com/a-/AOh14Gh6AHe4iGXQ9XKVgfVV35w31UbSzKs84xUYuNNS=s96-c", "aud": [ "693417856482-slejtj57gb2nrcehe82ih45o2vdhkj5t.apps.googleusercontent.com" ], "azp": "693417856482-slejtj57gb2nrcehe82ih45o2vdhkj5t.apps.googleusercontent.com", "name": "test testing", "exp": 1590535843, "family_name": "testing", "iat": 1590532243, "email": "test@gamil.com" }, "subject": "108161422188958518395", "authorizedParty": "693417856482-slejtj57gb2nrcehe82ih45o2vdhkj5t.apps.googleusercontent.com", "accessTokenHash": "jVwoBv3AueI07-VJqKN0-A", "nonce": "4ByS7UbIYimkIOJvHUznNQGZ42GxgYh9tCM1K4vKfYc", "audience": [ "693417856482-slejtj57gb2nrcehe82ih45o2vdhkj5t.apps.googleusercontent.com" ], "issuer": "https://accounts.google.com", "authenticatedAt": null, "authorizationCodeHash": null, "authenticationContextClass": null, "authenticationMethods": null, "address": { "formatted": null, "streetAddress": null, "locality": null, "region": null, "postalCode": null, "country": null }, "locale": "en", "zoneInfo": null, "fullName": "test testing", "familyName": "testing", "nickName": null, "updatedAt": null, "website": null, "middleName": null, "birthdate": null, "gender": null, "givenName": "test", "email": "test@gamil.com", "phoneNumber": null, "picture": "https://lh3.googleusercontent.com/a-/AOh14Gh6AHe4iGXQ9XKVgfVV35w31UbSzKs84xUYuNNS=s96-c", "profile": null, "emailVerified": true, "phoneNumberVerified": null, "preferredUsername": null }, "userInfo": null }, { "authority": "SCOPE_https://www.googleapis.com/auth/userinfo.email" }, { "authority": "SCOPE_https://www.googleapis.com/auth/userinfo.profile" }, { "authority": "SCOPE_openid" } ], "details": { "remoteAddress": "0:0:0:0:0:0:0:1", "sessionId": "D3DCD92FB24A25CFC8B64160DD5C155B" }, "authenticated": true, "principal": { "authorities": [ { "authority": "ROLE_USER", "attributes": { "at_hash": "jVwoBv3AueI07-VJqKN0-A", "sub": "108161422188958518395", "email_verified": true, "iss": "https://accounts.google.com", "given_name": "test", "locale": "en", "nonce": "4ByS7UbIYimkIOJvHUznNQGZ42GxgYh9tCM1K4vKfYc", "picture": "https://lh3.googleusercontent.com/a-/AOh14Gh6AHe4iGXQ9XKVgfVV35w31UbSzKs84xUYuNNS=s96-c", "aud": [ "693417856482-slejtj57gb2nrcehe82ih45o2vdhkj5t.apps.googleusercontent.com" ], "azp": "693417856482-slejtj57gb2nrcehe82ih45o2vdhkj5t.apps.googleusercontent.com", "name": "test testing", "exp": 1590535843, "family_name": "testing", "iat": 1590532243, "email": "test@gamil.com" }, "idToken": { "tokenValue": "123", "issuedAt": 1590532243, "expiresAt": 1590535843, "claims": { "at_hash": "jVwoBv3AueI07-VJqKN0-A", "sub": "108161422188958518395", "email_verified": true, "iss": "https://accounts.google.com", "given_name": "test", "locale": "en", "nonce": "4ByS7UbIYimkIOJvHUznNQGZ42GxgYh9tCM1K4vKfYc", "picture": "https://lh3.googleusercontent.com/a-/AOh14Gh6AHe4iGXQ9XKVgfVV35w31UbSzKs84xUYuNNS=s96-c", "aud": [ "693417856482-slejtj57gb2nrcehe82ih45o2vdhkj5t.apps.googleusercontent.com" ], "azp": "693417856482-slejtj57gb2nrcehe82ih45o2vdhkj5t.apps.googleusercontent.com", "name": "test testing", "exp": 1590535843, "family_name": "testing", "iat": 1590532243, "email": "test@gamil.com" }, "subject": "108161422188958518395", "authorizedParty": "693417856482-slejtj57gb2nrcehe82ih45o2vdhkj5t.apps.googleusercontent.com", "accessTokenHash": "jVwoBv3AueI07-VJqKN0-A", "nonce": "4ByS7UbIYimkIOJvHUznNQGZ42GxgYh9tCM1K4vKfYc", "audience": [ "693417856482-slejtj57gb2nrcehe82ih45o2vdhkj5t.apps.googleusercontent.com" ], "issuer": "https://accounts.google.com", "authenticatedAt": null, "authorizationCodeHash": null, "authenticationContextClass": null, "authenticationMethods": null, "address": { "formatted": null, "streetAddress": null, "locality": null, "region": null, "postalCode": null, "country": null }, "locale": "en", "zoneInfo": null, "fullName": "test testing", "familyName": "testing", "nickName": null, "updatedAt": null, "website": null, "middleName": null, "birthdate": null, "gender": null, "givenName": "test", "email": "test@gamil.com", "phoneNumber": null, "picture": "https://lh3.googleusercontent.com/a-/AOh14Gh6AHe4iGXQ9XKVgfVV35w31UbSzKs84xUYuNNS=s96-c", "profile": null, "emailVerified": true, "phoneNumberVerified": null, "preferredUsername": null }, "userInfo": null }, { "authority": "SCOPE_https://www.googleapis.com/auth/userinfo.email" }, { "authority": "SCOPE_https://www.googleapis.com/auth/userinfo.profile" }, { "authority": "SCOPE_openid" } ], "attributes": { "at_hash": "jVwoBv3AueI07-VJqKN0-A", "sub": "108161422188958518395", "email_verified": true, "iss": "https://accounts.google.com", "given_name": "test", "locale": "en", "nonce": "4ByS7UbIYimkIOJvHUznNQGZ42GxgYh9tCM1K4vKfYc", "picture": "https://lh3.googleusercontent.com/a-/AOh14Gh6AHe4iGXQ9XKVgfVV35w31UbSzKs84xUYuNNS=s96-c", "aud": [ "693417856482-slejtj57gb2nrcehe82ih45o2vdhkj5t.apps.googleusercontent.com" ], "azp": "693417856482-slejtj57gb2nrcehe82ih45o2vdhkj5t.apps.googleusercontent.com", "name": "test testing", "exp": 1590535843, "family_name": "testing", "iat": 1590532243, "email": "test@gamil.com" }, "idToken": { "tokenValue": "123", "issuedAt": 1590532243, "expiresAt": 1590535843, "claims": { "at_hash": "jVwoBv3AueI07-VJqKN0-A", "sub": "108161422188958518395", "email_verified": true, "iss": "https://accounts.google.com", "given_name": "test", "locale": "en", "nonce": "4ByS7UbIYimkIOJvHUznNQGZ42GxgYh9tCM1K4vKfYc", "picture": "https://lh3.googleusercontent.com/a-/AOh14Gh6AHe4iGXQ9XKVgfVV35w31UbSzKs84xUYuNNS=s96-c", "aud": [ "693417856482-slejtj57gb2nrcehe82ih45o2vdhkj5t.apps.googleusercontent.com" ], "azp": "693417856482-slejtj57gb2nrcehe82ih45o2vdhkj5t.apps.googleusercontent.com", "name": "test testing", "exp": 1590535843, "family_name": "testing", "iat": 1590532243, "email": "test@gamil.com" }, "subject": "108161422188958518395", "authorizedParty": "693417856482-slejtj57gb2nrcehe82ih45o2vdhkj5t.apps.googleusercontent.com", "accessTokenHash": "jVwoBv3AueI07-VJqKN0-A", "nonce": "4ByS7UbIYimkIOJvHUznNQGZ42GxgYh9tCM1K4vKfYc", "audience": [ "693417856482-slejtj57gb2nrcehe82ih45o2vdhkj5t.apps.googleusercontent.com" ], "issuer": "https://accounts.google.com", "authenticatedAt": null, "authorizationCodeHash": null, "authenticationContextClass": null, "authenticationMethods": null, "address": { "formatted": null, "streetAddress": null, "locality": null, "region": null, "postalCode": null, "country": null }, "locale": "en", "zoneInfo": null, "fullName": "test testing", "familyName": "testing", "nickName": null, "updatedAt": null, "website": null, "middleName": null, "birthdate": null, "gender": null, "givenName": "test", "email": "test@gamil.com", "phoneNumber": null, "picture": "https://lh3.googleusercontent.com/a-/AOh14Gh6AHe4iGXQ9XKVgfVV35w31UbSzKs84xUYuNNS=s96-c", "profile": null, "emailVerified": true, "phoneNumberVerified": null, "preferredUsername": null }, "userInfo": null, "claims": { "at_hash": "jVwoBv3AueI07-VJqKN0-A", "sub": "108161422188958518395", "email_verified": true, "iss": "https://accounts.google.com", "given_name": "test", "locale": "en", "nonce": "4ByS7UbIYimkIOJvHUznNQGZ42GxgYh9tCM1K4vKfYc", "picture": "https://lh3.googleusercontent.com/a-/AOh14Gh6AHe4iGXQ9XKVgfVV35w31UbSzKs84xUYuNNS=s96-c", "aud": [ "693417856482-slejtj57gb2nrcehe82ih45o2vdhkj5t.apps.googleusercontent.com" ], "azp": "693417856482-slejtj57gb2nrcehe82ih45o2vdhkj5t.apps.googleusercontent.com", "name": "test testing", "exp": 1590535843, "family_name": "testing", "iat": 1590532243, "email": "test@gamil.com" }, "name": "108161422188958518395", "subject": "108161422188958518395", "expiresAt": 1590535843, "authorizedParty": "693417856482-slejtj57gb2nrcehe82ih45o2vdhkj5t.apps.googleusercontent.com", "accessTokenHash": "jVwoBv3AueI07-VJqKN0-A", "nonce": "4ByS7UbIYimkIOJvHUznNQGZ42GxgYh9tCM1K4vKfYc", "audience": [ "693417856482-slejtj57gb2nrcehe82ih45o2vdhkj5t.apps.googleusercontent.com" ], "issuer": "https://accounts.google.com", "issuedAt": 1590532243, "authenticatedAt": null, "authorizationCodeHash": null, "authenticationContextClass": null, "authenticationMethods": null, "address": { "formatted": null, "streetAddress": null, "locality": null, "region": null, "postalCode": null, "country": null }, "locale": "en", "zoneInfo": null, "fullName": "test testing", "familyName": "testing", "nickName": null, "updatedAt": null, "website": null, "middleName": null, "birthdate": null, "gender": null, "givenName": "test", "email": "test@gamil.com", "phoneNumber": null, "picture": "https://lh3.googleusercontent.com/a-/AOh14Gh6AHe4iGXQ9XKVgfVV35w31UbSzKs84xUYuNNS=s96-c", "profile": null, "emailVerified": true, "phoneNumberVerified": null, "preferredUsername": null }, "authorizedClientRegistrationId": "google", "credentials": "", "name": "108161422188958518395" } 栏。选择文件后，显示文件名及其扩展名

choose file

答案 12 :(得分：0)

对于Bootstrap v.5 

document.querySelectorAll('.form-file-input')
        .forEach(el => el.addEventListener('change', e => e.target.parentElement.querySelector('.form-file-text').innerText = e.target.files[0].name));

影响所有文件输入元素。无需指定元素ID。

答案 13 :(得分：0)

如果要在所有自定义输入中全局使用它，请使用以下jQuery代码：

$(document).ready(function () {
    $('.custom-file-input').on('change', function (e) {
         e.target.nextElementSibling.innerHTML = e.target.files[0].name;
    });
});

答案 14 :(得分：-1)

 <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01">
    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
  </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
 <script>
$(function() {
  $(document).on('change', ':file', function() {var input = $(this), numFiles = input.get(0).files ? input.get(0).files.length : 1,
        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');input.trigger('fileselect', [numFiles, label]);
  });
  $(document).ready( function() {
      $(':file').on('fileselect', function(event, numFiles, label) {var input = $(this).parents('.custom-file').find('.custom-file-label'),
      log = numFiles > 1 ? numFiles + ' files selected' : label;if( input.length ) {input.text(log);} else {if( log ) alert(log);}});
  });
});
 </script>
  </body>
</html>

答案 15 :(得分：-1)

没有JQuery

HTML：

<INPUT type="file" class="custom-file-input"  onchange="return onChangeFileInput(this);">

JS：

function onChangeFileInput(elem){
  var sibling = elem.nextSibling.nextSibling;
  sibling.innerHTML=elem.value;
  return true;
}

KliG

相关问题
最新问题