PHP通过AJAX上传图片数据答案

【问题标题】：PHP upload image data through AJAXPHP通过AJAX上传图片数据
【发布时间】：2020-06-03 13:30:31
【问题描述】：

我正在尝试将产品上传到我的 PHP 上传系统，其中包括多个变量，其中包括图像。

我正在使用ajax 函数来传输字符串变量和newForm()（与从input[type="file"] 获取的图像相关）。主要目标是使用我从 ajax 获取的数据上传 upload.php 文件中的图像和字符串。

但是传图片值有问题，一旦我把所有数据（包括图片）一起发送，系统就传不上数据，因为我强制使用processData: false，否则无法运行ajax功能.

此属性阻止将整个数据传输到我的 PHP 文件。

我怎样才能克服processData: false的影响，并使用AJAX将多个字符串和newForm()传输到upload.php文件？

AJAX：

      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);
          }
        });

上传.php

//Defines
$code = getRandomWord();
$productName = $_POST["proname"];  // Product name
$productDescription = $_POST["prodescription"]; // Product description
$productContent = $_POST["content"]; // Product content
$price = $_POST["price"]; // Product price
$date = date("d-m-Y"); // Product upload date
$date = date("Y-m-d",strtotime($date));



//Statements
if(empty($productName)){
    echo "שם מוצר חסר<br/>";
}
else if(empty($productDescription)){
    echo "תיאור מוצר חסר<br/>";
}
else if(empty($productContent)){
    echo "תוכן מוצר חסר<br/>";
}
else if(empty($price)){
    echo "לא הזנת מחיר מוצר<br/>";
}
else if(empty($_POST['tag'])){
    echo "חסר קטגוריות מוצר<br/>";
}
else if(empty($_POST['color'])){
    echo "צבע המוצר חסר<br/>";
}
else if($_FILES['file']['size'] == 0 && $_FILES['file']['error'] == 0){
    echo "התמונה הראשית חסרה<br/>";
}
else if($_FILES['files']['size'] == 0 && $_FILES['files']['error'] == 0){
    echo "לא הוספת תמונות<br/>";
}
else{
    //Image main upload
    $filename = $_FILES["file"]["name"];
    $file_basename = substr($filename, 0, strripos($filename, '.')); // get file name
    $file_ext = substr($filename, strripos($filename, '.')); // get file extention
    $filesize = $_FILES["file"]["size"];
    $allowed_file_types = array('.png', '.jpg', '.jpeg', '.jfif');
    // Rename file
    $newfilename = getRandomWord() . $file_ext;
    if (in_array($file_ext, $allowed_file_types) && ($filesize < 200000)) {
        if (file_exists("upload/" . $newfilename)) {
            // file already exists error
            echo "You have already uploaded this file.";
        } else {
            move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $newfilename);
            echo "File uploaded: " . $newfilename . "<br/>";
        }
    } elseif (empty($file_basename)) {
        // file selection error
        echo "Please select a file to upload.<br/>";
    } else {
        // file type error
        echo "Only these file typs are allowed for upload: " . implode(', ', $allowed_file_types);
        unlink($_FILES["file"]["tmp_name"]);
    }
    //Multiple image upload
    $countfiles = count($_FILES['files']['name']);
    $multipleDir = array();
    //Allowing to choose only 6 images
    if($countfiles > 7){
        echo "You can choose only 7 images to one product! <br/>";
    }
    else if($countfiles <= 0){
        echo "You didn't upload any photo! <br/>";
    }
    else{
        // Looping all files
        for($i=0;$i<$countfiles;$i++){
            $filesname = $_FILES['files']['name'][$i];
            $files_basename = substr($filesname, 0, strripos($filesname, '.'));
            $files_ext = substr($filesname, strripos($filesname, '.'));
            $allowed_files_types = array('.png','.jpg','.jpeg','.jfif');


            // Rename file
            $newfilesname = getRandomWord() . $files_ext;

            if (in_array($files_ext,$allowed_files_types))
            {
                if (file_exists("upload/" . $newfilesname))
                {
                    // file already exists error
                    echo "You have already uploaded: ".$newfilesname."<br/>";
                }
                else
                {
                    // Upload file
                    move_uploaded_file($_FILES['files']['tmp_name'][$i],'upload/'.$newfilesname);
                    echo "File uploaded: ". $newfilesname ."<br/>";
                    array_push($multipleDir, $newfilesname);
                }
            }
            else
            {
                // file type error
                echo "Only these file typs are allowed for upload: " . implode(', ',$allowed_files_types);
                unlink($_FILES["files"]["tmp_name"]);
            }
        }
    }

目前这是输出：

注意：未定义索引：proname in D:\XAMPP\htdocs\ugreen\cpanel\upload.php 在第 22 行

注意：未定义的索引：prodescription in D:\XAMPP\htdocs\ugreen\cpanel\upload.php 在第 23 行

注意：未定义的索引：内容在 D:\XAMPP\htdocs\ugreen\cpanel\upload.php 在第 24 行

注意：未定义的索引：价格在 D:\XAMPP\htdocs\ugreen\cpanel\upload.php

  <form id="form" method ="POST" enctype="multipart/form-data" class="validate" novalidate>
    <div id="mc_embed_signup_scroll">
      <div class="mc-field-group">
        <input type="text" name="proname" id="proname" placeholder="שם המוצר" class="required">
      </div>
      <div class="mc-field-group">
        <input type="text" placeholder="תיאור המוצר" id="prodescription" name="prodescription" class="required">
      </div>
      <div class="mc-field-group">
        <textarea class="required" id="content" name="content" placeholder="תיאור נרחב על המוצר" style="height: 200px;"></textarea>
      </div>
      <div class="mc-field-group">
        <input type="text" id="price" name="price" placeholder="מחיר המוצר" class="required">
      </div>
      <div class="mc-field-group">
        תמונה ראשית:
        <br/>
        <input id="file" name="file" type="file"/>
      </div>
      <br/>
      <br/>
      <div class="mc-field-group">
        העלאת תמונות - עד 7 תמונות
        <br/>
        <input type="file" name="files[]" id="files" multiple>
      </div>
      <br/>
      <br/>
      <div class="mc-field-group" id="tag">
        שייך מוצר:<br/><br/>
            <input type="checkbox" name="tag[]" value="usb">USB
            <input type="checkbox" name="tag[]" value="charge">מטען
            <input type="checkbox" name="tag[]" value="adapter">מתאם
            <input type="checkbox" name="tag[]" value="pc">למחשב <br/>
            <input type="checkbox" name="tag[]" value="car">לרכב
            <input type="checkbox" name="tag[]" value="cables">כבלים
            <input type="checkbox" name="tag[]" value="apple">אפל
            <input type="checkbox" name="tag[]" value="other">אחר
      </div>
      <br/>
      <br/>
      <div class="mc-field-group"id="color">
        צבעים זמינים:
        <br/><br/>
        <input type="checkbox" name="color[]" value="שחור" /> שחור
        <input type="checkbox" name="color[]" value="לבן" /> לבן
        <input type="checkbox" name="color[]" value="אדום" />  אדום
        <input type="checkbox" name="color[]" value="ורוד" /> ורוד  <br/>
        <input type="checkbox" name="color[]" value="צהוב" /> צהוב
        <input type="checkbox" name="color[]" value="ירוק" /> ירוק
        <input type="checkbox" name="color[]" value="סגול" /> סגול
        <input type="checkbox" name="color[]" value="כחול" /> כחול  <br/>
        <input type="checkbox" name="color[]" value="זהב" /> זהב
        <input type="checkbox" name="color[]" value="אפור" /> אפור
        <input type="checkbox" name="color[]" value="כתום" /> כתום
        <br/>
      </div>
      <p class="error-message">מלא את תיבות הטקסט באדום</p>
      <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_d6c6ce7da87357b90e9859e81_2091bdd722" tabindex="-1" value=""></div>
      <div class="clear"><input type="submit" name="addproduct" value="הוסף מוצר" id="mc-embedded-subscribe" class="cta-btn"></div>
    </div>
  </form>

注意：如果我删除 Ajax 数据请求并在同一页面中运行 PHP 代码，则代码可以正常工作。

【问题讨论】：

您可以禁用error_reporting的通知
@Ingus 但它不上传文件，只是无法运行文件之间的数据。
也很高兴看到 html 表单！
@Ingus 更新了 HTML。该代码可以在没有 ajax 的情况下完美运行，但我试图避免页面刷新。
我确实看到contentType:false 在ajax 调用中丢失了。

标签： php html jquery ajax

【解决方案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

【讨论】：

我如何从upload.php 获取这个？正常 $_POST？还是使用 json_decode？span>
$_POST 用于字符串，$_FILES 用于文件。

【解决方案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
        }
    });

【讨论】：