Блог

У меня есть некоторые текстовые данные и изображения на стороне сервера. и мне нужно отправить эти данные в виде объекта JSON. Но я не могу отправлять такие изображения из-за FormData.Поэтому мне нужно преобразовать данные моей формы в один объект JSON. Пожалуйста, помогите мне… Спасибо Тебе..!

HTML-часть —

     <form>
        <div class="form-group">
            <label for="txtcustomerImage"> <i class="tags icon"></i> Image Of Your NIC</label>
            <input class="form-control-file" id="txtcustomerImage" type="file" name="txtcustomerImage">
            </div>
    </form>
 

Часть Ajax —

 $('#btnCreateNewAccount').click(function () {


    var fileObject = $("#txtcustomerImage")[0].files[0];//access file object from input field
    var fileName = $("#txtcustomerImage")[0].files[0].name; //get file name
    var form = new FormData(); //setup form data object to send file data
    form.append("custImage", fileObject, fileName); //append data



    console.log('clicked..');
    let customerNIC = $('txtcustomerNIC').val();
    let customerName = $('txtcustomerName').val();
    let customerAddress = $('txtcustomerAddress').val();

    console.log(form)

    $.ajax({
        method: "post",
        url: "http://localhost:8080/Sprinf_Final-Back-end/customer",
        contentType: "application/json",
        data: JSON.stringify({
            customerNIC: customerNIC,
            customerName: customerName,
            customerAddress: customerAddress,

        }),
        success: function (res) {
            if (res.massage == 'Success') {
                alert('Your Account is Successfully Created!When You Log to Server Use Your User Name amp; Password..!');
                console.log(res);
            } else {
                console.log('error');
            }
        }
    });

});
 

Нет смысла создавать FormData объект, если вы хотите отправить данные в формате JSON. Вы можете прочитать содержимое файла fileObject.text() и отправить его:

 $('#btnCreateNewAccount').click(async function() {
  const fileObject = $("#txtcustomerImage")[0].files[0]; //access file object from input field
  const fileName = fileObject.name; //get file name
  const data = JSON.stringify({
      fileObject: await fileObject.text(),
      fileName
  })
  console.log(data);  
}); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="form-group">
    <label for="txtcustomerImage"> <i class="tags icon"></i> Image Of Your NIC</label>
    <input class="form-control-file" id="txtcustomerImage" type="file" name="txtcustomerImage">
  </div>
</form>
<button id="btnCreateNewAccount">
Click
</button>