Question

我有这个HTML表单，其中包含一种文件类型和一个文本框。

function uploadFiles() {
  debugger
  var input = document.getElementById('files');

  var files = input.files;
  console.log(files)
  var formData = new FormData();

  for (var i = 0; i != files.length; i++) {
    formData.append("files", files[i]);
  }

  var tags = $('#tags').val();
  console.log(tags)
  formData.append("tags", tags);
  debugger
  for (let [name, value] of formData) {
    alert(`${name} = ${value}`);
  }

  var myForm = JSON.stringify(formData)
  console.log(myForm)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="form-group">
    <div class="buttons">
      <div class="upload-button">
        <input id="files" name="files" type="file" size="1" />
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="tags">Tags:</label>
    <input type="text" class="form-control" id="tags">
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary" id="btnSave" onclick="uploadFiles();">Upload and Save</button>
  </div>
  </div>
</form>

问题是console.log(myForm)打印{}。当进行for循环时，它显示files = [object File]。正确执行此操作的目的，以便可以将其传递给Api数据属性。

$.ajax(
    {
        url: "https://localhost:44371/api/file/upload",
        //data: formData,
        processData: false,
        contentType: false,
        type: "POST",
        data: JSON.stringify(formData),
        dataType: 'json',
        success: function () {
            debugger
            alert("Files Uploaded!");
            $('#fileUploadStatus').text('File uploaded.')
            checkSaveButton()
        }
    }
);

Answer 1

使用type = button不提交或使用Submit事件并阻止其提交

字符串化也不会显示文件

相关的SO问题

How to convert FormData(HTML5 Object) to JSON

FormData.append() doesn't work with files

document.getElementById("form1").addEventListener("submit", function(e) {
  e.preventDefault();
  var input = document.getElementById('files');
  var files = input.files;
  var formData = new FormData();
  for (var i = 0; i < files.length; i++) {
    formData.append("files", files[i]);
  }
  var tags = $('#tags').val();

  formData.append("tags", tags);
  const myForm = JSON.stringify(Object.fromEntries(formData)); // will show the files object as empty
  
  for (var pair of formData.entries()) {
    console.log(pair[0]+ ', ' + pair[1].name || pair[1]); 
  }
  console.log(myForm)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1">
  <div class="form-group">
    <div class="buttons">
      <div class="upload-button">
        <input id="files" name="files" type="file" size="1" />
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="tags">Tags:</label>
    <input type="text" class="form-control" id="tags">
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary" id="btnSave">Upload and Save</button>
  </div>
</form>

Javascript FormData对象中的空对象

1 个答案: