Question

我有一个简单的文件上传，我希望使用href包含在jquery选项卡中。不幸的是，它在标签中打破了。

代码如下。如果我注释掉$（“＃tabs”）。tabs（）;在包含代码中，它有效;如果没有，则不会发生文件上传。

包含在名为upload.html的文件中的文件上传代码如下：

<html>
<body>
  <form name="registration" action="../php/recordInteraction.php" method="post" 
      accept-charset="utf-8" target="_self"  enctype="multipart/form-data" >  
  <div> 
     <input type="file" name="fileToUpload" id="fileToUpload" >
     <p><label for="submit"> Hi</label>
        <input type="submit" name="submit" id="submit" value="Upload" > 
     </p> 
  </div> 
 </form> 
</body> </html>

包含jquery代码small.html是：

<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <script>
  $(function() { 
     $( "#tabs" ).tabs();
   }); 
  </script>
</head>
<body>

<div id="tabs" >
  <ul>
    <li><a id="upload" href="upload.html">Upload</a></li>
  </ul>
</div>

</body>
</html>

Answer 1

这是一个简单的jQuery解决方案。单击链接后，jQuery会单击文件上载按钮。

jQuery被评论。

$('#uploadButton').click(function() { // when the tab is clicked

  $('#fileToUpload').click(); // pretend the file input was clicked

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<html>

<body>

  <a href="#" id="uploadButton">Browse for files</a>
  <br/><br/>

  <form name="registration" action="../php/recordInteraction.php" method="post" accept-charset="utf-8" target="_self" enctype="multipart/form-data">
    <div>
      <input type="file" name="fileToUpload" id="fileToUpload">
      <p>
        <label for="submit">Hi</label>
        <input type="submit" name="submit" id="submit" value="Upload">
      </p>
    </div>
  </form>
</body>

</html>

Answer 2

@God写得好的是正确的。你也可以直接提交表格。

<html>
<body>
  <a href="#" id="uploadButton">Browse for files</a>
  <br/><br/>
  <form name="registration" action="../php/recordInteraction.php" method="post" 
  accept-charset="utf-8" target="_self"  enctype="multipart/form-data" **id="fileSubmitForm"**>  
  <div> 
     <input type="file" name="fileToUpload" id="fileToUpload" >
     <p><label for="submit"> Hi</label>
        <input type="submit" name="submit" id="submit" value="Upload" > 
    </p> 
  </div> 
 </form> 
</body> </html>

$('#uploadButton').click(function() { // when the tab is clicked

  $('#fileSubmitForm').submit(); // pretend the file input was clicked

});

$（“＃tabs”）。tabs（）打破文件上传

2 个答案: