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

Posted 2023-03-10

【中文标题】将 Mongoose/Multer 文件上传的工作模态/FORM 更改为 MULTIPART/FORM - 模态保持打开状态

【英文标题】：Changed working Modal/FORM to MULTIPART/FORM for Mongoose/Multer File Upload - Modal stays Open

【发布时间】：2019-03-28 14:15:21

【问题描述】：

我有一个工作模式/表单（缩短）：

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()
                      
    );

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

问候

【参考方案1】：

我自己找到并补充：

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

到提交按钮....