添加新的文件上传字段

Add new file upload field

本文关键字:字段 文件 添加      更新时间:2023-09-26

也许我在这里很愚蠢,但是当我单击"添加新"时,它只是在加载上传.php

它不会添加另一个输入

<html>
  <head>
    <script>
      $(document).ready(function(){
        $('.add_more').click(function(e){
          e.preventDefault();
          $(this).before("<input name='file[]' type='file'/>");
        });
      });
    </script>
  </head>
  <body>
    <form enctype="multipart/form-data" action="upload.php" method="post">
      <input name="file[]" type="file" />
      <button class="add_more">Add More Files</button>
      <input type="submit" value="Upload File" id="upload"/>
    </form>
  </body>
</html>

感谢任何能告诉我我在哪里失误的人。

你的代码工作正常,你应该添加jQuery lib,如下所示,e.preventDefault()将阻止按钮提交表单:

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

希望这有帮助。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <script>
      $(document).ready(function(){
        $('.add_more').click(function(e){
          e.preventDefault();
          $(this).before("<input name='file[]' type='file'/>");
        });
      });
    </script>
  </head>
  <body>
    <form enctype="multipart/form-data" action="upload.php" method="post">
      <input name="file[]" type="file" />
      <button type='button' class="add_more">Add More Files</button>
      <input type="submit" value="Upload File" id="upload"/>
    </form>
  </body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <script>
      $(document).ready(function(){
        $('.add_more').click(function(e){
          e.preventDefault();
          $(this).before("<input name='file[]' type='file'/>");
        });
      });
    </script>
  </head>
  <body>
    <form enctype="multipart/form-data" action="upload.php" method="post">
      <input name="file[]" type="file" />
      <button type='button' class="add_more">Add More Files</button>
      <input type="submit" value="Upload File" id="upload"/>
    </form>
  </body>
</html>