提交后我無法重置表單內的輸入文件

Question

我有一個包含一些字段的表單，提交完成后我想重置整個表單，但只重置輸入文本區域而不是輸入類型文件。

我檢查了每一個類似的問題和解決方案，但它們都不適合我。一些解決方案刷新頁面，我不希望這樣。

<form class=" dropzone px-5" id="mydropzone">
  <h2 class="text-center">Lets create your menu</h2>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCalories">Calorie</label>
      <input type="text" class="form-control" id="inputCalories" required>
    </div>
    <div class="form-group col-md-6">
      <label for="cc">Calorie Calculator</label>
      <button id="cc" class="btn btn-primary btn-lg"><i class="fas fa-calculator mr-2"></i>Click Me</button>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group ml-2 col-sm-6">
      <label>Menu Item Image</label>
      <div id="msg"></div>
      <div class="progress" id="uploader">
        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%"></div>
      </div>
      <input type="file" name="img[]" class="file" accept="image/*" id="fileButton">
      <div class="input-group my-3">
        <input type="text" class="form-control" disabled placeholder="Upload File" id="file" required>
        <div class="input-group-append">
          <button type="button" class="browse btn btn-primary"><i class="fas fa-folder-open mr-2"></i>Browse...</button>
        </div>
      </div>
      <div class="ml-2 col-sm-6">
        <img src=" " id="preview" class="img-thumbnail">
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary btn-block mb-3">Submit Menu</button>
  <!-- -------------------------------------------------------------------------- -->
  </div>
</form>

我的創建菜單在表單提交后清除所有字段。

// create menu
var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileButton');
fileButton.addEventListener('change', function(e) {
  var file = e.target.files[0];
  var storageRef = firebase.storage().ref('foodImg/' + file.name);
  var task = storageRef.put(file);
  task.on('state_changed', function progress(snapshot) {
    var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    uploader.value = percentage;

  }, function(error) {
    console.error(error);

  }, function() {
    task.snapshot.ref.getDownloadURL().then(function(downloadURL) {
      console.log('File available at', downloadURL);
      const createMenuForm = document.querySelector('#mydropzone');
      createMenuForm.addEventListener('submit', (e) => {
        e.preventDefault();
        db.collection('restaurants').add({
          foodLine: {
            menuTitle: createMenuForm.menuTitle.value
          },
          food: {
            foodName: createMenuForm.foodName.value,
            imageURL: downloadURL,
            inputCalories: createMenuForm.inputCalories.value,
            menuItemDescription: createMenuForm.menuItemDescription.value,
            menuItemInfo: createMenuForm.menuItemInfo.value
          }
        }).then(() => {
          //reset form
          createMenuForm.reset();
          fileButton.value = "";
          var preview = document.getElementById('preview');
          preview.value = "";
        }).catch(err => {
          console.log(err.message);
        });
      });
    });
  });
});

Answer 1

你也可以試試這些東西嗎

document.getElementById("myForm").reset();
$("#myForm").trigger("reset");

Answer 2

我認為您嘗試在聲明const createMenuForm的 scope 之外訪問createMenuForm 。

嘗試在事件監聽器上方聲明它：

// create menu
const createMenuForm = document.querySelector('#mydropzone');
var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileButton');
// ...

或直接與

document.querySelector('#mydropzone').reset();

Answer 3

我調試並發現預覽需要干凈

document.getElementById("preview").src = "#";