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

I want to send the image data from the html img tag using AJAX and save it in my MySQL db. I have a column in my db which is a longblob datatype, thats where I'm going to store the image. I also have other data that I'm going to save along with it but my main concern is the image, I don't know how to do it. I did try to find answers here on and other sites but didn't find what I was looking for. My code looks like this.

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>

this is where the image tag is

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

Can I pass the image data like the others?

Php:

<?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();   ?>

So to wrap it up. I have an image data in my html, call ajax to send the image and the other data in php and save it in mysql db.

My javascript code here is in plain javascript so I would like a plain javascript solution also. Thank you.

查看全部
dtiu94034
dtiu94034
2017/05/03 03:13
  • php
  • html
  • mysql
  • ajax
  • javascript
  • 点赞
  • 收藏
  • 回答
    私信

0个回复