使用ajax和php插入mysql的问题

【问题标题】：Problem to insert into mysql with ajax and php使用ajax和php插入mysql的问题
【发布时间】：2020-10-24 16:22:33
【问题描述】：

我想在 mysql 的 2 个表中插入，一个表是关于产品的信息，另一个是关于这些产品的图像。 我有这个表格

<form action="#" method="post" enctype="multipart/form-data" id="upload-multi-images">
  <div class="form-group">
      <label>Name</label>
      <input type="text" name="name" class="form-control" required autocomplete="off">
  </div>
  <div class="form-group">
      <label>Price</label>
      <input type="text" name="price" class="form-control" required autocomplete="off">
  </div>
  <div class="form-group">
      <label>Stock</label>
      <input type="text" name="stock" class="form-control" required autocomplete="off">
  </div>
  <div class="row">
      <div class="col-xl-2 col-lg-2 col-md-3 col-sm-4 col-xs-12" id="add-photo-container">
           <div class="add-new-photo first" id="add-photo">
               <span><i class="icon-camera"></i></span>
           </div>
           <input type="file" multiple id="add-new-photo">
      </div>
  </div>
  <div class="button-container">
      <button type="submit">Subir imágenes</button>
  </div> 
</form>

我用这个 JS 获取图像和信息

   $(document).on("submit", "#upload-multi-images", function (e) {

    e.preventDefault();

   $(document).on("submit", "#upload-multi-images", function (e) {
    
    var namePro = document.getElementsByName('name')[0].value;
    var price = document.getElementsByName('price')[0].value;
    var stock = document.getElementsByName('stock')[0].value; 

    formData.append('namePro', namePro);
    formData.append('price', price);
    formData.append('stock', stock);

    e.preventDefault();
    
    //Envio mediante Ajax
    $.ajax({
        url: "upload.php",
        type: "post",
        dataType: "json",
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        beforeSend: function () {
            loading(true, "Adding photo...");
        },
        success: function (res) {
            loading(false);
            if (res.status == "true") {
                createImages(res.all_ids);
                $("#Images form .row > div:not(#add-photo-container)").remove();
                formData = new FormData();
            } else {
                alert(res.error);
            }
        },
        error: function (e) {
            console.log(e.responseText);
        }
    });
});

然后将图像发送到这个 php 以将它们发送到 mysql

$namePRO = $_REQUEST['namePro'];
$price = $_REQUEST['price'];
$stock = $_REQUEST['stock'];

$insertDatos = $conexion->prepare("INSERT INTO products (name , price, stock) VALUES (:name, :price, :stock)");
$wasUploadedDATA = $insertDatos->execute(array(
    ":name" => $namePRO,
    ":price" => $price,
    ":stock" => $stock,
));

$idPRO = $conexion->lastInsertId();

if (isset($_FILES) && !empty($_FILES)) {
$files = array_filter($_FILES, function($item) {
    return $item["name"][0] != "";
});

foreach ($files as $file) {
    $tmp_name = $file["tmp_name"];
    $name = $file["name"];
    $path = "/images/$name";
    $pathSYS = "/var/www/html/images/$name";
    $insertImages = $conexion->prepare("INSERT INTO product_files (id_pro, name, web_path, system_path) VALUES (:idPRO, :name, :path, :pathSYS)");
    $wasUploaded = $insertImages->execute(array(
        ":name" => $name,
        ":idPRO" => $idPRO,
        ":path" => $path,
        ":pathSYS" => $pathSYS,
    ));

    if ($wasUploaded) {
        $id = $conexion->lastInsertId();
        $data["all_ids"]["id_$id"]["id"] = $id;
        $data["all_ids"]["id_$id"]["name"] = $name;
        move_uploaded_file($tmp_name, "images/$name");
    }
    else {
        die("There was an error. Please contact with the admin.");
    }
}

}

我也有这些其他的JS，但我认为它们不是很重要

function getRandomString(length) {
var text = "";
var possible = 
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

for (var i = 0; i < length; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));

return text;
  }
   function createPreview(file, id) {
   var imgCodified = URL.createObjectURL(file);
   var img = $('<div class="col-xl-2 col-lg-2 col-md-3 col-sm-4 col-xs-12" 
 id="' 
+ id + '"><div class="image-container"> <figure> <img src="' + imgCodified + 
'" alt="Foto del usuario"> <figcaption> <i class="icon-cross"></i> 
</figcaption> </figure> </div></div>');
$(img).insertBefore("#add-photo-container");
}
function createImages(all_ids) {
for (const key in all_ids) {
    var image = all_ids[key];

    var img = $('<div class="col-xl-2 col-lg-2 col-md-3 col-sm-4 col-xs-12" 
    data-id="' + image.id + '"><div class="image-container"> <figure> <img 
    src="images/' + image.name + '" alt="Foto del usuario"> <figcaption> <i 
   class="icon-cross"></i> </figcaption> </figure> </div></div>');
    $("#my-images").append(img);
}

}

function showModal(card) {
$("#" + card).show();
$(".modal").addClass("show");
}

function closeModal() {
$(".modal").removeClass("show");
setTimeout(function () {
$(".modal .modal-card").hide();
}, 300);
}

function loading(status, tag) {
if (status) {
$("#loading .tag").text(tag);
showModal("loading");
}
else {
closeModal();
}
}

function showMessage(message) {
$("#Message .tag").text(message);
showModal("Message");
}

【问题讨论】：

  • 尝试将其余的表单元素添加到您的 formData 对象中
  • 我这样做了，但我无法获取 php 中的信息
  • 能否分享一下获取其他表单元素的php代码？
  • 我也尝试过使用 $_POST，但没有成功。我用你问的代码编辑了问题
  • 你的 php 部分看起来找到了，你是如何将这些元素添加到你的 formData 对象的？你能也和我们分享一下这部分吗？

标签： php mysql ajax forms


【解决方案1】：

我没有你的所有代码，但我已经在你的代码中发现了问题，我将在此处为你添加修复程序。

首先，如果你使用的是jquery，最好把你的代码写成统一的格式，到处使用jquery，不要在jquery和纯JavaScript之间切换。 话虽如此，您可以轻松地将id 属性添加到您的html 元素中，而不是使用document.getElementsByName，并在jquery 中使用$('#&lt;id&gt;') 方式访问它们。

其次，即使您使用 javascript 来获取您的 html 元素数据，您所做的也是错误的。 var namePro = document.getElementsByName('name'); 将选择整个 html &lt;input&gt; 对象，而不是它的值。所以你要改成：document.getElementsByName("name")[0].value

所以你有两个选择：

1- 使用你已经拥有的，然后稍微改变一下：

var namePro = document.getElementsByName('name')[0].value;
var price = document.getElementsByName('price')[0].value;
var stock = document.getElementsByName('stock')[0].value;

2- 或者要切换到 jquery，您需要在 html 中为所有这些元素添加 id：

<div class="form-group">
    <label>Name</label>
    <input type="text" id="name" name="name" class="form-control" required autocomplete="off">
</div>
<div class="form-group">
    <label>Price</label>
    <input type="text" id="price" name="price" class="form-control" required autocomplete="off">
</div>
<div class="form-group">
    <label>Stock</label>
    <input type="text" id="stock" name="stock" class="form-control" required autocomplete="off">
</div>

然后将 JavaScript 更改为：

formData.append('name', $('#name').val());
formData.append('price', $('#price').val());
formData.append('stock', $('#stock').val());

更新：

在我的机器上运行的示例代码是这样的：

HTML：

<form action="#" method="post" enctype="multipart/form-data" id="upload-multi-images">
    <div class="form-group">
        <label>Name</label>
        <input type="text" name="name" class="form-control" required autocomplete="off">
    </div>
    <div class="form-group">
        <label>Price</label>
        <input type="text" name="price" class="form-control" required autocomplete="off">
    </div>
    <div class="form-group">
        <label>Stock</label>
        <input type="text" name="stock" class="form-control" required autocomplete="off">
    </div>
    <div class="row">
        <div class="col-xl-2 col-lg-2 col-md-3 col-sm-4 col-xs-12" id="add-photo-container">
            <div class="add-new-photo first" id="add-photo">
                <span><i class="icon-camera"></i></span>
            </div>
            <input type="file" multiple id="add-new-photo">
        </div>
    </div>
    <div class="button-container">
        <button type="submit">Subir imágenes</button>
    </div>
</form>

JS #1：

var formData = new FormData();
$(document).ready(function(){
    $(".modal").on("click", function (e) {
        console.log(e);
        if (($(e.target).hasClass("modal-main") || $(e.target).hasClass("close-modal")) && $("#loading").css("display") == "none") {
            closeModal();
        }
    });

    $(document).on("click", "#add-photo", function(){
        $("#add-new-photo").click();
    });


    $(document).on("change", "#add-new-photo", function () {
        var files = this.files;
        var element;
        var supportedImages = ["image/jpeg", "image/png", "image/gif"];
        var InvalidElementFound = false;

        for (var i = 0; i < files.length; i++) {
            element = files[i];

            if (supportedImages.indexOf(element.type) != -1) {
                var id = getRandomString(7);
                createPreview(element, id);
                formData.append(id, element);
            }
            else {
                InvalidElementFound = true;
            }
        }

        if (InvalidElementFound) {
            showMessage("Invalid Elements Found.");
        }
        else {
            showMessage("All the files were uploaded succesfully.");
        }
    });

    $(document).on("click", "#Images .image-container", function(e){
        var parent = $(this).parent();
        var id = $(parent).attr("id");
        formData.delete(id);
        $(parent).remove();
    });

    $(document).on("submit", "#upload-multi-images", function (e) {
        e.preventDefault();

        var namePro = document.getElementsByName('name')[0].value;
        var price = document.getElementsByName('price')[0].value;
        var stock = document.getElementsByName('stock')[0].value; 

        formData.append('namePro', namePro);
        formData.append('price', price);
        formData.append('stock', stock);

        //Envio mediante Ajax
        $.ajax({
            url: "upload.php",
            type: "post",
            dataType: "json",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            beforeSend: function () {
                loading(true, "Adding photo...");
            },
            success: function (res) {
                console.log('success');
                console.log(res);
                loading(false);
                if (res.status == "true") {
                    createImages(res.all_ids);
                    $("#Images form .row > div:not(#add-photo-container)").remove();
                    formData = new FormData();
                } else {
                    alert(res.error);
                }
            },
            error: function (e) {
                console.log('error');
                console.log(e.responseText);
            }
        });
    });

    $(document).on("click", "#MyImages .image-container", function (e) {
        var parent = $(this).parent();
        var id = $(parent).attr("data-id");
        var data = {
            id : id
        }

        $.post("delete.php", data, function(res) {
            if (res == "true") {
                showMessage("¡Images successfully removed!");
                $(parent).remove();
            }
            else {
                showMessage("Sorry, there was an error uploading the images.");
            }
        });
    });
});

JS #2：

function getRandomString(length) {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for (var i = 0; i < length; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    }

    return text;
}

function createPreview(file, id) {
    var imgCodified = URL.createObjectURL(file);
    var img = $('<div class="col-xl-2 col-lg-2 col-md-3 col-sm-4 col-xs-12" id="'+ id + '"><div class="image-container"> <figure> <img src="' + imgCodified + '" alt="Foto del usuario"> <figcaption> <i class="icon-cross"></i></figcaption> </figure> </div></div>');
    $(img).insertBefore("#add-photo-container");
}

function createImages(all_ids) {
    for (const key in all_ids) {
        var image = all_ids[key];

        var img = $('<div class="col-xl-2 col-lg-2 col-md-3 col-sm-4 col-xs-12" data-id="' + image.id + '"><div class="image-container"> <figure> <img src="images/' + image.name + '" alt="Foto del usuario"> <figcaption> <i class="icon-cross"></i> </figcaption> </figure> </div></div>');
        $("#my-images").append(img);
    }    
}

function showModal(card) {
    $("#" + card).show();
    $(".modal").addClass("show");
}

function closeModal() {
    $(".modal").removeClass("show");
    setTimeout(function () {
        $(".modal .modal-card").hide();
    }, 300);
}

function loading(status, tag) {
    if (status) {
        $("#loading .tag").text(tag);
        showModal("loading");
    }
    else {
        closeModal();
    }
}

function showMessage(message) {
    $("#Message .tag").text(message);
    showModal("Message");
}

PHP：（上传.php）

$arr_ajax = array();

$arr_ajax['namePro'] = $_REQUEST['namePro'];
$arr_ajax['price'] = $_REQUEST['price'];
$arr_ajax['stock'] = $_REQUEST['stock'];

if (isset($_FILES) && !empty($_FILES)) {
    $files = array_filter($_FILES, function($item) {
        return $item["name"][0] != "";
    });
    
    $iCnt = 0;
    foreach ($files as $file) {
        $arr_ajax['Filename'.$iCnt] = $file["name"];
        $iCnt++;
    }
}

echo json_encode($arr_ajax);

使用此代码，当我单击提交按钮时，我会在浏览器控制台中收到以下响应：

index.html:79 success
index.html:80 {namePro: "Test Product", price: "100.00", stock: "15", Filename0: "faces1.jpg"}

【讨论】：

  • 对不起，没有成功，不知道为什么，如果你愿意我可以将项目分享到数据库来解决这个问题，因为我想继续。我遇到了问题，因为我从 github 下载了该代码，并且我正在添加部分信息。让我知道你是否可以检查它，我会分享完整的项目，我对此没有问题。
  • 能否请您先分享您拥有的完整 JS 文件？而且您的代码是否仅适用于文件？我是否上传它们并将它们插入数据库？你有任何错误吗？
  • 我只有部分信息有问题，代码仅将图像上传到数据库。让我添加代码
  • 我想知道您如何将其他表单元素添加到您的 formData 对象中？如果您使用的是var namePro = document.getElementsByName('name');，这是不正确的。如果您使用我建议的任何一种方式，它应该可以工作。如果它不起作用，您会在浏览器的开发人员工具中得到什么响应？
  • 什么都没有，代码保持加载但什么也没有发生，当我只添加图像时，代码工作并将图像上传到数据库中，但它保持加载的信息，我补充说你告诉我，这就是为什么我想分享这个项目，我正在学习这个，但有很多东西我还不明白。感谢您的帮助
猜你喜欢
  • 2020-01-16
  • 2015-02-05
  • 1970-01-01
  • 2014-11-26
  • 1970-01-01
  • 1970-01-01
  • 2016-04-13
  • 2016-12-12
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode