Question

我正在开发一个Web应用程序，用户可以通过单击“导入图片”图标然后上传来决定是否需要添加图片。通过单击名为“添加另一个发现”的按钮，可以多次填写此表单，然后清除该表单并允许用户输入下一个条目。

当点击“添加另一个发现”按钮时，我想清除用户上传的文件，以便在下一个条目中没有重复的文件。

这是我的代码：

page.html -“ addAnother”按钮所在的位置

<html>

<head>
  <base target="_top">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <?!= include("page-css"); ?>
</head>

<body>

  <div class="container">
    <form action="#" method="post" enctype="multipart/form-data">
      <div class="row">
        <div class="file-field input-field">
          <div class="waves-effect waves-light btn-small">
            <i class="material-icons right">insert_photo</i>
            <span>Import Picture</span>
            <input id="files" type="file" name="image">
          </div>

          <div class="file-path-wrapper">
            <input disabled selected type="text" class="file-path validate" placeholder="Choose an image">
          </div>
        </div>
      </div>
    </form>

    <div class="row">
      <a id="addAnother" class="waves-effect waves-light btn-small blue accent-2" type="submit" onclick="submitForm(); return true;">Add Another Finding</a>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="https://gumroad.com/js/gumroad.js"></script>
    <?!= include("page-js"); ?>

  </div>
  <!-- CLOSE CONTAINER-->

</body>

</html>

Page-js.html 这是我要编写脚本的地方，以在单击“添加另一个”按钮时清除表单

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://gumroad.com/js/gumroad.js"></script>

<script>
  document.getElementById("addAnother").addEventListener("click", doStuff1);

  //Attempt #1- Tried to clear out the uploaded file when the "add another" button is selected using doStuff1()      

  function doStuff1() {

    $('#files').val('');
    $('#files').next() removeClass('active');

  }

  //Attempt #2- try to use the "onclick" within the "addAnother" button (not sure how to go about it)
  function submitForm() {

    var files = $('#files')[0].files;

    file = files[0];

    reader.readAsDataURL(file);

  }
</script>
<style>
  .form-row {
    margin-bottom: 15px;
  }
</style>

单击按钮后清除文件上传字段

0 个答案: