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, // changecontentType: 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        }    });