मेरे पास यह 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) प्रिंट {} है। और जब लूप के लिए, यह files = [object File] प्रिंट करता है। यह अधिकार प्राप्त करने का उद्देश्य ताकि मैं इसे एपी डेटा संपत्ति में पास कर सकूं।

$.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()
        }
    }
);
0
Steve 22 सितंबर 2020, 08:37

1 उत्तर

सबसे बढ़िया उत्तर

सबमिट न करने के लिए या तो टाइप = बटन का उपयोग करें या सबमिट ईवेंट का उपयोग करें और इसे सबमिट करने से रोकें

इसके अलावा stringify एक फाइल नहीं दिखाएगा

प्रासंगिक SO प्रश्न

फॉर्मडाटा (एचटीएमएल 5 ऑब्जेक्ट) को JSON में कैसे बदलें convert

FormData.append () फाइलों के साथ काम नहीं करता

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>
1
mplungjan 22 सितंबर 2020, 06:57