Как передать изображение и несколько входных данных в php с помощью FormData()

У меня есть форма, которая позволяет пользователям вводить номер товара, описание товара, дату создания, а также загружать изображение. Я хочу отправить номер элемента, описание элемента, дату создания, загруженное изображение и ввод без формы (идентификатор входа) в мой файл php для загрузки в мою базу данных. У меня все работало, пока я не попытался добавить свое изображение. Я не могу получить мое изображение пройти. Мне сказали использовать FormData для изображения, но как мне передать другие входные данные из формы и идентификатор входа в систему, не входящий в форму. Вот мой исходный код, который работал, за исключением того, что изображение передавалось в неправильном формате.

 function AddItem(){
var number = document.forms["additemform"]["item_number"].value;
var description = document.forms["additemform"]["item_description"].value;
var date = document.forms["additemform"]["creation_date"].value;
var useremail= "<?php echo $_SESSION['UserEmail']; ?>";
var image = document.forms["additemform"]["item_image"].value;

      var isValid = false;
  $.ajax({           
      type: "POST",  
      url: "/AddNewItem.php",  
      data: { "Number": number,  "User_Email": useremail, "Description": description,  "Date": date, "Image": image },
      dataType: "json",
      success: function(resp){
        console.log(resp);
        if(resp.reply == "Success")
        {
            isValid = true;
          form.submit();
        }
        else
        {
        isValid = false;
        }
      },
      error: function(data, status){
        console.log(data, status);
        alert("error")
      }

    }); //end Ajax
    console.log(isValid);
     return isValid;
};
</script>

Обратите внимание, что UserEmail не является частью формы. Мне нужно, чтобы это было отправлено вместе с другими данными, чтобы их можно было загрузить одновременно.

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

   function AddItem(){
    var itemdata = new FormData();
    itemdata.append('number', $(document.forms["additemform"]["item_number"].value);
itemdata.append('description', $(document.forms["additemform"]["item_description"].value);
itemdata.append('image', $(document.forms["additemform"]["item_image"].value)[0].files[0]);

1) я на правильном пути? Синтаксис прав? 2) как добавить адрес электронной почты пользователя?


php ajax form-data
person BEP    schedule 26.01.2019    source источник
comment
Возможный дубликат Проблема с отправкой изображения через AJAX   -  person cecil merrel aka bringrainfire    schedule 27.01.2019

Ответы (1)


arrow_upward
0
arrow_downward

Вы должны начать с этого, чтобы добавить изображение/изображения в FormData:

var formdata = new FormData();

// Check For Multile Files to Upload
if( document.getElementById("upload_field_id") ) {

    var filedata = document.getElementById("upload_field_id").files;
    var len = filedata.length;

    if( len ) {
        for (var i=0; i < len; i++) {
            var file = filedata[i];
        formdata.append('files[]', file);
        }
    }
}

После этого вы также можете добавить другие поля:

// Your code: 
var number = document.forms["additemform"]["item_number"].value;
var description = document.forms["additemform"]["item_description"].value;
var date = document.forms["additemform"]["creation_date"].value;
var useremail= "<?php echo $_SESSION['UserEmail']; ?>";
// End of Your code
formdata.append('number', number);
formdata.append('description', description);
formdata.append('date', date);
formdata.append('useremail', useremail);

Вот и все. Вы просто помещаете formdata в качестве значения свойства data в свой вызов ajax и перехватываете $_REQUEST в целевом файле .php.

person TheoPlatica    schedule 26.01.2019
comment
BlueFish - СПАСИБО. ОЧЕНЬ ПОЛЕЗНО. Если я знаю, что у меня будет только одно изображение, нужен ли мне этот цикл? - person BEP; 27.01.2019
comment
Рад помочь БЭП. Вам не нужен цикл, но он не влияет на вашу функциональность для загрузки одного файла. Если вы хотите удалить цикл и заставить его работать только для одного файла, вы можете: var filedata = document.getElementById("upload_field_id").files[0]; formdata.append('file_upload', filedata); - person TheoPlatica; 27.01.2019
comment
BlueFish - поэтому я добавил код данных формы так же, как вы показали в своем первоначальном ответе (для номера, описания, данных, электронной почты пользователя). Я добавил это для своего изображения: var filedata = document.getElementById(_nc_image_in).files[0]; formdata.append('NC_Image', данные файла); Я не получаю ошибок, пока не изменю свойство данных Ajax на data: formdata. Как только я изменю свойство данных на это, мой код не пройдет. Мой Ajax выдает ошибку. Я не получаю ошибок в своей консоли, но Ajax просто завершает работу. Правилен ли мой синтаксис для данных: formdata,? нужно ли мне настраивать какие-либо другие наборы в моих свойствах Ajax? - person BEP; 28.01.2019