Bootstrap 4文件輸入不工作

我在我的php項目中使用mdbootstrap（Bootstrap 4）免費版本。所以它不允許我在類型文件中使用輸入。所以我想在該項目中僅使用引導程序3來進行文件上傳功能。Bootstrap 4文件輸入不工作

代碼詳情如下：我已經創建了一個模板文件。所以，我的渲染所需的意見，在下面一行：<?php require_once ("content/" . $content . ".php"); ?>

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <title>Material Design Bootstrap</title> 

    <!-- Font Awesome --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <!-- Bootstrap core CSS --> 
    <link href="<?=base_url()?>assets/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="<?=base_url()?>assets/css/bootstrap-datepicker3.min.css" rel="stylesheet"> 
    <!-- Material Design Bootstrap --> 
    <link href="<?=base_url()?>assets/css/mdb.min.css" rel="stylesheet"> 
    <!-- Your custom styles (optional) --> 
    <link href="<?=base_url()?>assets/css/style.css" rel="stylesheet"> 

    <link rel="stylesheet" href="<?=base_url()?>assets/css/jquery.mCustomScrollbar.css"> 
    <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'> 
    <script type="text/javascript" src="<?=base_url()?>assets/js/jquery-3.1.1.min.js"></script> 

</head> 
<body> 
<?php require 'common/cust_loader.php'; ?> 
<?php require 'common/header.php'; ?> 
<?php require 'common/popup.php'; ?> 
<?php require_once ("content/" . $content . ".php"); ?> 
<?php require 'common/footer.php'; ?> 
    <script type="text/javascript" src="<?=base_url()?>assets/js/bootstrap-datepicker.min.js"></script> 
    <!-- Bootstrap tooltips --> 
    <script type="text/javascript" src="<?=base_url()?>assets/js/tether.min.js"></script> 
    <!-- Bootstrap core JavaScript --> 
    <script type="text/javascript" src="<?=base_url()?>assets/js/bootstrap.min.js"></script> 
    <!-- MDB core JavaScript --> 
    <script type="text/javascript" src="<?=base_url()?>assets/js/mdb.min.js"></script> 

    <!-- custom scrollbar plugin --> 
    <script src="<?=base_url()?>assets/js/jquery.mCustomScrollbar.concat.min.js"></script> 
    <script type="text/javascript"> 
    (function($){ 
     $(window).on("load",function(){ 
      $.mCustomScrollbar.defaults.scrollButtons.enable=true; //enable scrolling buttons by default 
      $.mCustomScrollbar.defaults.axis="yx"; //enable 2 axis scrollbars by default 
      $("#content-md").mCustomScrollbar({theme:"minimal-dark"}); 
      $(".all-themes-switch a").click(function(e){ 
        e.preventDefault(); 
        var $this=$(this), 
         rel=$this.attr("rel"), 
         el=$(".content"); 
        switch(rel){ 
         case "toggle-content": 
          el.toggleClass("expanded-content"); 
          break; 
        } 
       });   
     }); 
    })(jQuery);  
    </script>    
</body> 
</html>

因此，在這個文件我已經實現mdbootstrap（引導4）所以對文件上傳我想用引導3.

簡而言之，我想在bootstrap 4代碼中使用bootstrap 3。

任何人都可以幫助我。在此先感謝。爲引導4

<form> 
    <div class="file-field"> 
    <div class="btn btn-primary btn-sm"> 
     <span>Choose file</span> 
     <input type="file"> 
    </div> 
    <div class="file-path-wrapper"> 
     <input class="file-path validate" type="text" placeholder="Upload your file"> 
    </div> 
    </div> 
</form>

引導3

來源

2017-05-23 Shashikant

確保您已將BS3樣式表的代碼中的組件複製到您的BS4樣式表中 – Jer

您是否已嘗試在您想要使用php的文件中使用bootstrap3中的組件？ –

我不能那樣做。如果我這樣做，它會改變我的網站外觀。 – Shashikant

材料設計 - 輸入文件的形式

<div class="form-group"> 
    <label for="exampleInputFile">File input</label> 
    <input type="file" id="exampleInputFile"> 
    <p class="help-block">Example block-level help text here.</p> 
</div>

當你用這兩種解決方案的一個嘗試，會發生什麼？你在控制檯中是否有錯誤信息？

來源

2017-05-23 12:20:29

Bootstrap 4文件輸入不工作

回答

相關問題