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：

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的图片上传。当我按下“提交”按钮时，Upload，MongoDB Entries等正在工作，没问题，但是Modal永远保持打开状态。即使我使用取消关闭了模态，也将其关闭，但是即使我重新打开它，值仍然存在。

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：

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'"

到“提交”按钮...。

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

1 个答案: