Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.09.2019, 13:30
Аспирант
Отправить личное сообщение для Leon2110 Посмотреть профиль Найти все сообщения от Leon2110
 
Регистрация: 04.07.2016
Сообщений: 44

Добавить в мой js код поле с файлом
Добрый день, есть скрипт который отправляет данные формы в 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
Ответить с цитированием
  #2 (permalink)  
Старый 07.09.2019, 14:46
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,716

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

Параметр data формы можно передать как data: new FormData(f), где f, это форма. Но такой способ имеет один недостаток, даже при не выбранном файле на сервере будет получено это поле, и как следствие ошибка загрузки файла. Поэтому элементы формы лучше обойти циклом добавив их имя/значение в FormData используя его методы.
Ответить с цитированием
  #3 (permalink)  
Старый 07.09.2019, 15:02
Аспирант
Отправить личное сообщение для Leon2110 Посмотреть профиль Найти все сообщения от Leon2110
 
Регистрация: 04.07.2016
Сообщений: 44

Путем проб и ошибок получилось так, файл ходит, обрабатывается (с передачей 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)
            }           
        });  
    })          
});
Ответить с цитированием
  #4 (permalink)  
Старый 07.09.2019, 15:14
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,716

$('#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>">.

Последний раз редактировалось laimas, 07.09.2019 в 16:19.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подключить js файл к js файлу Ozerich Общие вопросы Javascript 8 11.08.2018 21:05
Сохранение контента в файл через JS fdcore Общие вопросы Javascript 10 18.12.2014 14:23
С помощью JS добавить к ссылкам картинку в CSS wlad2 Элементы интерфейса 7 16.10.2010 22:44
Большой JS файл. Кэш IE6. deadpsh Общие вопросы Javascript 1 26.11.2008 22:38
Как защитить файл js от скачивания с сервера? slon Общие вопросы Javascript 2 02.07.2008 00:14