Framework 7文件上传Ajax

Question

i am trying to upload file with ajax in Framework 7.

the code was made to post a form but requirement changed and added a file upload with it .

i tried to modify existing code with no luck .

it throws a error when i attached a file with new FormData() i tried to implement several methods to attach file but sadly none of them are working .

if anyone help me to sort problem

Uncaught TypeError: Illegal invocation

function addVoiceMail() {
  var status = '0'; 
  var formData = myApp.formToJSON('#my-form-sms');
  var data2 = JSON.stringify(formData);

  var fileInput = document.getElementById("msg_file");
  var post_data = new FormData();
  if (fileInput.files.length > 0) {
    post_data.append('file' , fileInput.files[0]);
  }
$.ajax({
  url: baseurl2 + 'somepage.php',
  type: "POST",
  data: {
    Data: data2,
    file: post_data,
  },
  crossDomain: true,
  cache: false,
  success: function (data) {
    if (data == 'success') {
      myApp.alert('sent', '');
      mainView.router.load({
        url: 'success.html',
        ignoreCache: true,
        animatePages: true
      });
    }else {
      var errors = JSON.parse(data);
      $.each(errors, function (key, value) {
        myApp.addNotification({
          title: 'Error',
          message: value
        });
      });
    }
  }
});

}

Answer 1

Your data object needs to contains only the FormData object. You have to add data2 directly in the FormData object.

Try something like this :

var formData = new FormData();
formData.append('file', myFile); //append file to FormData
formData.append('data', data2); //add additionnal informations

Finally, pass your formData object to ajax data :

$.ajax({ 
   data: formData,
   ...
});