Узел js отправляет запрос через ошибку формы данных jquery

Я хочу отправить файл через jQuery post запрос. Мой node.js прочитает файл и вставит data в Монгодб.

Это моя функция node.js:

upload: function(req, res){
    var FileName;
      req.file('myFile').upload(function(err,files){
      var i = 1;
        if(err) return res.serverError(err);
      FileName = files[0].filename; ......

Вышеуказанная функция работает нормально, если отправлено post запрос непосредственно от html как показано ниже:

<form method="post" action="/indi id="indiform" enctype="multipart/form-data">
        <input type="file" name="myFile" id="myIndifile"/>
        <input type="submit" id="indisubmitbutton" value="Submit" name="upload" class="btn btn-primary" id = "uploadFile"/>   
</form>

Теперь я хочу представить post запросить у jQuery и обработать ответ data как:

var file = $("#myIndifile")[0].files[0];
$.ajax({
    type: 'post',
    url: '/indi',
    async: false,
    data: JSON.stringify({ myFile:file }),
    contentType: "application/json",
    success: function (data) {
      alert(" Number of lines Read  :"+data[0].lines+"\n"+"Number of records saved:"+data[1].saved);        
    }
  });

Это бросать Cannot read property 'filename' of undefined at FileName = files[0].filename error,

Если я отправлю запрос, как это:

var file = $("#myIndifile")[0].files[0];
var formdata = new FormData();
formdata.append("myFile", file);
  $.ajax({
    type: 'post',
    url: '/indi',
    data: formdata,
    contentType: "multipart/form-data",
    success: function (data) {
      Pace.stop;
      alert(" Number of lines Read  :"+data[0].lines+"\n"+"Number of records saved:"+data[1].saved);        
    }
  });

броски JavaScriptUncaught TypeError: Illegal invocation error,

Все работает нормально если отправлю post запрос от HTML.

Как отправить post запрос от jQuery, который имеет содержимое файла?

Источник

2 ответа

Решение

Проблема с вашим вторым фрагментом кода заключается в том, что вы неправильно указали тип содержимого, для mutipart-formdata необходима граница. Однако, когда вы передаете объект FormData объекту $.ajax, он устанавливает правильный тип содержимого и границу для вас, если вы установите для contentType и processData значение false.

var file = $("#myIndifile")[0].files[0];
var formdata = new FormData();
formdata.append("myFile", file);
  $.ajax({
    type: 'post',
    url: '/indi',
    data: formdata,
    contentType: false,
    processData: false,
    success: function (data) {
      Pace.stop;
      alert(" Number of lines Read  :"+data[0].lines+"\n"+"Number of records saved:"+data[1].saved);

    }
});
Источник

Приведенный выше ответ работал для меня. Если в случае, если он не работал, вы можете попробовать этот, который находится в javascript. Оба отлично работают.

var fd = new FormData;

    var file = document.getElementById('myIndifile').files[0];
    fd.append('myFile', file);
    var xhr = new XMLHttpRequest();
    xhr.file = file; 
    xhr.addEventListener('progress', function(e) {
        var done = e.position || e.loaded, total = e.totalSize || e.total;
        console.log('xhr progress: ' + (Math.floor(done/total*1000)/10) + '%');
    }, false);
    if ( xhr.upload ) {
        xhr.upload.onprogress = function(e) {
            var done = e.position || e.loaded, total = e.totalSize || e.total;
            console.log('xhr.upload progress: ' + done + ' / ' + total + ' = ' + (Math.floor(done/total*1000)/10) + '%');
        };
    }
    xhr.onreadystatechange = function(e) {
        if ( 4 == this.readyState ) {
            console.log(['xhr upload complete', e]);
            var resdata = JSON.parse(xhr.responseText);
            alert(" Number of lines Read  :"+resdata[0].lines+"\n"+"Number of records saved:"+resdata[1].saved);

        }
    };
    xhr.open('post', '/indi', true);
    xhr.send(fd);
});
Источник
Другие вопросы по тегам