Question

我想使用AJAX从html img标签发送图像数据并将其保存在我的MySQL数据库中。我的数据库中有一个列是一个longblob数据类型，这就是我要存储图像的地方。我还有其他数据可以保存，但我主要关心的是图像，我不知道该怎么做。我确实尝试在这里和其他网站上找到答案，但没有找到我想要的东西。我的代码看起来像这样。

HTML：

<div class="col-lg-12">
    <div class="form-group col-lg-4">
        <label>ARP No.</label>
        <label>
            <input type="text" name="arp-no" class="form-control" id='arp-no' required=""/>
        </label>
    </div>
    <div class="form-group col-lg-4">
        <label>Owner</label>
        <label>
            <input type="text" name="owner" id="owner" class="form-control" value="" required=""/>
        </label>
    </div>
</div>

这是图片标签

的地方

<div class="col-lg-6">
    <div class="form-group col-lg-12">
        <img name="map-sketch" id="image" width="100%" height="100%" src='http://www.thekrausemouse.com/wp-content/uploads/2016/03/Sample.jpg'></img>
    </div>
</div>  

<div class="row">
    <div class="col-lg-1">
        <button type="button" class="btn btn-primary" onclick="saveFaas()">Save</button>
    </div>
    <div class="col-lg-2" id="saving-info"></div>
</div>

Javascript AJAX：

function saveFaas(){
if (confirm('Are you sure you want to save this information?')) {
    var params = 'kind=land';
    params += '&arp-no='+document.getElementById('arp-no').value;
    params += '&owner='+document.getElementById('owner').value;

    //the image data
    params += '&image=';

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("saving-info").innerHTML = xmlhttp.responseText;
        }else { // waiting for result 
            document.getElementById('saving-info').innerHTML = '<img src="../images/ajax_loader.gif">';
        }
    }
    xmlhttp.open("POST", "../functions/save-faas.php", true);
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xmlhttp.send(params);
}}

我可以像其他人一样传递图像数据吗？

腓：

<?php
//db info
include('../fragments/db-config.php');

// Create connection
$conn = new mysqli($servername, $dbusername, $dbpassword, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$kind = $_POST['kind'];
if ($kind == 'land') {
    $image = $_POST['image']; // the image

    $arp_no = $_POST['arp-no'];
    $owner = $_POST['owner'];

    $sql = "UPDATE faas SET arp_number='$arp_no', owner_name='$owner' 
    WHERE faas_id=$faas_id;";
}


if ($conn->query($sql) === TRUE) {
    echo "<label>Record Updated</label>";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}


$conn->close();   ?>

所以要把它包起来。我在我的html中有一个图像数据，调用ajax在php中发送图像和其他数据并将其保存在mysql db中。

我的javascript代码在普通的javascript中，所以我想要一个简单的JavaScript解决方案。谢谢。

使用AJAX将图像数据从html标签发送到PHP，并将其作为blob数据保存在MySQL中

0 个答案: