PHP通过AJAX上传图片数据

Question

我正在尝试将产品上传到我的 PHP 上传系统，其中包括多个变量和图像。我正在使用ajax函数来传输字符串变量和newForm()（与从中获取的图像相关的input[type="file"]）。主要目标是upload.php使用我从 ajax 获取的数据上传文件中的图像和字符串。但是传递图像值有麻烦，一旦我将所有数据（包括图像）一起发送，系统就无法传递数据，因为我被迫使用 ，否则processData: false无法运行 ajax 功能。此属性阻止将整个数据传输到我的 PHP 文件。我怎样才能克服processData: false影响，传输多个字符串并newForm()使用 AJAX 来upload.php归档？阿贾克斯：      var proname = $('#proname').val();      var prodescription = $('#prodescription').val();      var content = $('#content').val();      var price = $('#price').val();      //Main image upload      var file_main = $('#file').prop('files')[0];      var main = new FormData();      main.append('file', file_main);      //Serval images upload      var file_images = $('#files').prop('files')[0];      var images = new FormData();      images.append('files', file_images);      //Checkboxes      var tag = new Array();      $("#tag input:checked").each(function() {         tag.push($(this).val());      });      var color = new Array();      $("#color input:checked").each(function() {         color.push($(this).val());      });      //Ajax data transfer to upload.php      $.ajax({          type: 'POST',          dataType: 'json',          processData: false,          url: 'upload.php',          data: { proname: proname,                  prodescription: prodescription,                  content: content,                  price: price,                  tag: tag,                  color: color,                  file: main,                  files: images                }, // All the data as $_GET in php          cache: false,          success: function (result) {            $('#success').html(result);            console.log(result);          }        });目前这是输出：注意：未定义索引：D:\XAMPP\htdocs\ugreen\cpanel\upload.php 中第 22 行的 proname注意：未定义索引：D:\XAMPP\htdocs\ugreen\cpanel\upload.php 第23行的prodescription注意：未定义索引：第24行D:\XAMPP\htdocs\ugreen\cpanel\upload.php中的内容注意：未定义索引：价格在D:\XAMPP\htdocs\ugreen\cpanel\upload.php

Answer 1

在这里，我将只使用 FormData 类的一个实例。

var data = new FormData();

data.append('proname', proname);

data.append('prodescription', prodescription);

data.append('content', content);

data.append('price', price);

data.append('tag', tag);

data.append('color', color);

data.append('file', $("#file")[0].files[0]);

$.each($("#files")[0].files, function(i, file) {

    data.append('files[]', file);

});

在 ajax() 调用中更改/添加：

data: data, // change

contentType: false, // add

Answer 2

我使用以下代码上传我的表单数据，包括图像/文件。希望能帮助到你。

let yourForm = $('#yourForm');

let actoin = // your action page;

$.ajax({

        url: action,

        data:new FormData(yourForm[0]),

        async:false,

        type:'post',

        processData: false,

        contentType: false,

        success: function (data) {

           // your code here

        },

        error: function (data) {

            // your code here

        }

    });