时间戳

首页 > 解决方案 > 使用ajax和php插入mysql的问题

php - 使用ajax和php插入mysql的问题

问题描述

我想在 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");
}

标签： phpmysqlajaxforms

解决方案

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

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

其次，即使您使用 javascript 来获取您的 html 元素数据，您所做的也是错误的。var namePro = document.getElementsByName('name');将选择整个 html<input>对象而不是它的值。因此，您必须将其更改为：document.getElementsByName("name")[0].value

所以你有2个选择：

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"}

推荐阅读