javascript - 将 Mongoose/Multer 文件上传的工作 Modal/FORM 更改为 MULTIPART/FORM - Modal 保持打开状态

Question

我有一个有效的模态/表单(缩短):

html:

<div id="addNew" class="modal">
<form class="modal-content animate">
    <div class="container">
    <table id="t01">
      <tbody>
        <tr>
          <td>Date</td>
          <td>Time</td>
        </tr>
        <tr>
          <td>
          <input id="id_date" type="date" name="date" required>
          </td>
          <td>
          <input id="id_time" type="time" name="time" required>
          </td>
        </tr>
      </tbody>
    </table>
      <br>
      <button type="submit" class="buttons" onclick="submit_new()">Safe</button>
      <button type="button" onclick="document.getElementById('addNew').style.display='none'" class="cancelbtn">Cancel</button>
    </div>
  </form>
</div>

它正在调用一个将内容放入 mongodb 的函数:

功能:

function submit_new() {
    $.ajax({
        type: "POST",
        url: '/submit_new',
        data: {
            date:$('#id_date').val(),
            time:$('#id_time').val(),
            },
        });
    };

应用程序:

app.post('/submit_new', function (req, res) {
          const postBody = req.body;
          Faenge.create({date: postBody.date, time: postBody.time }), function (err, res) {
            if (err)  {
                throw err;
            }
                console.log("1 document inserted");
                Faenge.close()
            }
    });

这没有任何问题。点击提交后，模式会关闭，并且值会被放入集合中。

我需要使用 multer 添加图像上传。当我点击提交按钮时，上传、MongoDB 条目等正在工作，没有问题，但模态框永远保持打开状态。即使我使用取消关闭模式，它也会关闭，但如果我重新打开它，这些值仍然存在。

html:

<div id="addNew" class="modal">
<form class="modal-content animate" id="test-data" method="post" enctype="multipart/form-data">
<div class="container">
<table id="t01">
<tbody>
<tr>
<td>Date</td>
<td>Time</td>
</tr>
<tr>
<td>
<input id="id_date" type="date" name="date" required>
</td>
<td>
<input id="id_time" type="time" name="time" required>
</td>
</tr>
</tbody>
</table>
</tr>
<br>
<tr>
<input id="id_picture" type="file" name="Bild" accept="image/*" multiple="multiple" />  
</form>
<br>
<br>
<button type="submit" class="buttons">Speichern</button>
<button type="button" onclick="document.getElementById('addNew').style.display='none'" class="cancelbtn">Abbrechen</button>
</div>
</form>

功能:

$(document).ready(function() {
$("form#test-data").submit(function(e) {
        e.preventDefault();    
        var formData = new FormData(this);
        $.ajax({
            url: '/submit_new',
            type: 'POST',
            data: formData,
            success: function (data) {
                alert(data);
            },
            cache: false,
            contentType: false,
            processData: false
        });
    });
return false;
}); 

应用程序:

app.post('/submit_new', upload.single('Bild') , function (req, res, next) {
            if(req.file){
                filepath = req.file.path;
            } else {
                filepath = "";
            }
          const postBody = req.body;
          Faenge.create({
              date: postBody.date, 
              time: postBody.time, 
              filepath: filepath,
              }), function (err, res) {
              if (err)  {
                throw err;
              }else{
                console.log("1 document inserted");
                Faenge.close()
            }}          
    });

请问有人可以帮忙吗？提前致谢，

问候

Answer 1

我自己找到的，并补充道:

onclick="document.getElementById('addNew').style.display='none'"

到提交按钮....