讓jquery代碼在面板內運行

當用戶點擊上傳鏈接時，主頁面調用test.php。 test.php的代碼在文本框中顯示文件的名稱。當test.php中的代碼運行時，它會顯示由於文件中的jquery而要上傳的文件的名稱。但是當我從主頁面的面板中調用頁面時，它不起作用。我試圖將Jquery函數添加到頁面上的加載事件文檔中，但似乎沒有什麼區別。讓jquery代碼在面板內運行

<!DOCTYPE html> 
<html> 

<head> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
</head> 

<body> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<script type="text/javascript"> 
     $(window).load(function(){ 
      setTimeout(function() { 
       $('#loading').fadeOut(400, "linear"); 
      }, 300); 
     }); 
     $(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() { 

      $(' li').click(function (e) { 
      e.preventDefault(); 
      var $this = $(this); 
      $('.panel').hide(); 
      $('#' + $this.find('a').attr('href')).show(); 
      return false; 
      }); 
      $(':file').on('fileselect', function(event, numFiles, label) { 

      var input = $(this).parents('.input-group').find(':text'), 
       log = numFiles > 1 ? numFiles + ' files selected' : label; 

      if(input.length) { 
       input.val(log); 
      } else { 
       if(log) alert(log); 
      } 

     }); 
     }); // end ready 
    </script> 
<!-- #sidebar-menu --> 

    <div id="page-sidebar" aria-expaned ="true"> 
    <div class="scroll-sidebar"> 
    <ul id="sidebar-menu"> 
    <li class="active"><a href="panel1" title="test" ><span><font color ="black"> Upload </font></span></a></li> 
    </ul><!-- #sidebar-menu --> 
    </div> 
    </div> 
     <div id="page-content-wrapper"> 
       <div id ="panel1" class="panel panel-primary" style="display: none;margin-left:auto;margin-right:auto;"> 
        <script>$("#panel1").load('test.php','#page-content'); </script> 
       </div>    
     </div> 
    </div>    
    </div> 
</body> 
</html>

test.php的

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'> 
<meta name="description" content=""> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
<!--<script src="js/upload_script.js"></script> --> 
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
<script type="text/javascript"> 
$(function() { 
    // We can attach the `fileselect` event to all file inputs on the page 
    $(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]); 
    }); 

    // We can watch for our custom `fileselect` event like this 
    $(document).ready(function() { 
     $(':file').on('fileselect', function(event, numFiles, label) { 

      var input = $(this).parents('.input-group').find(':text'), 
       log = numFiles > 1 ? numFiles + ' files selected' : label; 

      if(input.length) { 
       input.val(log); 
      } else { 
       if(log) alert(log); 
      } 

     }); 
    }); 
}); 
    </script> 
</head> 
<body> 
    <div id="page-content-wrapper"> 
<div id="page-content"> 
      <div id="page-title"> 
         <h2>Title</h2> 
      </div> 

<div class="container" style="margin-top: 20px;"> 
    <div class="row"> 
     <div class="col-lg-6 col-sm-6 col-12"> 
      <div class="input-group"> 
       <label class="input-group-btn"> 
        <span class="btn btn-primary"> 
         Browse&hellip; <input type="file" style="display: none;" multiple> 
        </span> 
       </label> 
       <input type="text" class="form-control" readonly> 
      </div> 

     </div> 
     <div class="col-lg-2 col-sm-2 col-12"> 
      <input class="btn btn-info" type="submit" value="Submit"> 
     </div> 
    </div> 
</div> 
      </div> 
</div> 
</body> 
</html>

來源

2016-09-14 user1721546

我不是100％肯定你問的，因爲你可憐解釋什麼，但如果我想通了成功，要在形式test.php也顯示上傳文件的名稱。要做到這一點變化：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

到：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

也許你有一個使用jQuery上傳一些目標，但是PHP也可以上傳文件。你有太多的代碼和兩頁來實現簡單的事情。

來源

2016-09-15 08:11:54

我對可憐的解釋表示歉意，但你已經正確地理解了這個問題。我嘗試在更改jquery庫後運行代碼，但它仍然無法工作。此外，我已經能夠上傳帶有html和php代碼的文件，我需要使用引導程序。請給我一個例子。 – user1721546

讓jquery代碼在面板內運行

回答

相關問題