Добавить в мой js код поле с файлом

[Leon2110]

Добрый день, есть скрипт который отправляет данные формы в php файл для дальнейшей обработки полей:

function addsite() {
     sname = $("#sname").val();
     scat1 = $("#scat1").val();
     scat2 = $("#scat2").val();
     scat3 = $("#scat3").val();
     sprice = $("#sprice").val();
     soldprice = $("#soldprice").val();
     scms = $("#scms").val();
     swork = $("#swork").val();
     surl = $("#surl").val();
     sopis = $("#sopis").val();
     form = 'addsite';
     user = '<?php echo $id; ?>';
     $.ajax({
          type:"POST",
          url:"../php/lk.php",
          data: {"sname":sname, "scat1":scat1, "scat2":scat2, "scat3":scat3, "sprice":sprice, "soldprice":soldprice, "scms":scms, "swork":swork, "surl":surl, "sopis":sopis, "form":form, "form":form, "user":user},
          cache: false,
          success: function(responce){ 
            $('#addsite').html(responce);
          }
      })
}

Это все работает. Но в форме есть еще одно поле с файлом:

<input id="sscr" name="sscr" type="file" class="form-control">

Можно ли в мой js код передать еще и этот файл? (В php я обработаю, опыт есть), не знаю как в js это правильно дописать в data

[laimas]

Строки 2-13 выбросить.
В опциях $.ajax добавить два параметра: contentType: false и processData: false.
ID юзера не в код JS вставлять на стороне сервера, а в скрытое поле формы. Если это form = 'addsite' именование формы, то также получать ее как свойство формы.

Параметр data формы можно передать как data: new FormData(f), где f, это форма. Но такой способ имеет один недостаток, даже при не выбранном файле на сервере будет получено это поле, и как следствие ошибка загрузки файла. Поэтому элементы формы лучше обойти циклом добавив их имя/значение в FormData используя его методы.

[Leon2110]

Путем проб и ошибок получилось так, файл ходит, обрабатывается (с передачей id юзера да, пока не придумал как это сделать)

$(function() {
    $('#saddsite').on('submit', function(e){
        e.preventDefault()
        var form = $(this);
        var data = new FormData();
        // Сбор данных из обычных полей
        form.find(':input[name]').not('[type="file"]').each(function() { 
            var field = $(this);
            data.append(field.attr('name'), field.val());
        });
	data.append('form', 'addsite');
	data.append('user', '<?php echo $id; ?>');
       
	   // Сбор данных о файле
        var filesField = form.find('input[type="file"]');
        var fileName = filesField.attr('name');
        var file = filesField.prop('files')[0];
        data.append(fileName, file) ;

        $.ajax({
            url: '../php/lk.php',
            type: 'POST',
            data: data,
            contentType: false,
            cache: false, 
            processData:false, 
            success: function(response) {
                console.log(response)
            }           
        });  
    })          
});

[laimas]

$('#saddsite').on('submit', function(e){
e.preventDefault()
var data = new FormData();

а далее просто собрать поля, которые нужно оправить (те поля формы, которые имеют имя, то есть не требующие отправки их не должны иметь, та же кнопка submit к примеру.)

$.each(this.elements, function() {
    if(this.name) data.append(this.name, this.value)
});

разбрасывать все отдельно на два цикла нет ни какого смысла, единственно, что нужно сделать, так это проверить тип поля, и если это файл, то добавлять только в том случае, если файл выбран, то есть его value не пусто.

PS. То есть полно это так:

$('#saddsite').on('submit', function(e){
    e.preventDefault()
    var data = new FormData();
    $.each(this.elements, function() {
        if(this.name) {
            if(this.type=='file' && this.value) data.append(this.name, this.files[0]);
            else data.append(this.name, this.value);
        }
    });
    //если и это нужно form = 'addsite';, то
    data.append('form', this.id);
    $.ajax(
        //....
    )
});

Касаемо id юзера, чего там придумывать - отдавая страницу клиенту, помещайте в форму поле <input type="hidden" name="user" value="<?=$id>">.

[Alehana]

Попытался повторить описанное в приведенном посте:

let imagevorkerimage=$(".fotoworker").prop('files')[0];
  console.log(imagevorkerimage);

Выдает File { name: "jsB2SVztOqU.jpg", lastModified: 1561738954801, webkitRelativePath: "", size: 192016, type: "image/jpeg" }. Что из этого необходимо для сохранения файла ?
Пытался добавить в ajax переменные contentType: false и processData:

let dannienowworker="Строка, собранная из данных с других полей. Её содержимое в обработчике записывается в специальную таблицу бд";
 $.ajax({
                                type: 'POST',
                                data:{dannienowworker:dannienowworker},
                                contentType: false,
                            processData:false,
                                url:"Файл обработчик",
                                success: function (result) {
                                   
                                }
                                });

В созданной строке бд все столбцы пустые. Без вышеупомянутх свойст все работает нормально. Данные в файл-обработчик поступают в ином виде (сейчас содержащая их входное значание переменная - $_POST["dannienowworker"])?

[laimas]

t imagevorkerimage=$(".fotoworker").prop('files')[0];

Это для чего?

let dannienowworker="Строка, собранная из данных с других полей. Её содержимое в обработчике записывается в специальную таблицу бд";

Если data:{dannienowworker:dannienowworker}, это строка, то чего же вы ожидаете от $_POST["dannienowworker"])?