Question

当用户点击“上传”链接时，主页面会调用test.php。 test.php具有在文本框中显示文件名的代码。当test.php中的代码运行时，由于文件中的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>

Answer 1

由于你的解释不好，我不能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也可以上传文件。你有太多的代码和两个页面来实现简单的事情。

让Jquery代码在面板中运行

1 个答案: