パネル内でJqueryコードを実行する

メインページは、ユーザーが[アップロード]リンクをクリックしたときにtest.phpを呼び出します。 test.phpにはテキストボックスにファイルの名前を表示するコードがあります。 test.phpのコードが実行されると、ファイル内のjqueryのためにアップロードするファイルの名前が表示されます。しかし、私がメインページからパネルのページを呼び出すと、それは機能しません。両方のページでloadイベントのドキュメントに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>

私はあなたがあるため、あなたが悪い説明の求めているものを100％わからないんだけど、私は成功し、それを考え出した場合、あなたがフォームをしたい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

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は、あまりにもファイルをアップロードすることができます。シンプルなものを実現するには、あまりにも多くのコードと2ページが必要です。

出典

2016-09-15 08:11:54

私は申し訳ありませんが、問題を正しく理解しています。jqueryライブラリを変更した後もコードを実行しようとしましたが、それでもまだ作業はしません。また、htmlやPHPコードでファイルをアップロードできました私はブートストラップを使用する必要があります。私に例を教えてください。 – user1721546

パネル内でJqueryコードを実行する

答えて

関連する問題