how to post image with ajax without form-data? - php

Question

I tried var $pic1 = document.getElementById("pic").value; give the image path: C:fakepath/pictures/pic.jpg
Solutions always include sending in form-data. However, I could not do it.
my images folder: /img
I want image upload to 'img' folder after INSERT process.
view : https://i.stack.imgur.com/t7Gxx.png
<div class="form-row">
<div class="form-group col-md-4"><input type="text" class="form-control" id="input1" name="name" placeholder="Name"></div>
<div class="form-group col-md-4">
<div class="custom-file">
<input type="file" class="custom-file-input" id="pic" aria-describedby="inputGroupFileAddon01" accept=".jpg,.gif,.png">
<label class="custom-file-label" for="inputGroupFile01">Choose Image</label>
</div>
</div>
<div class="form-group col-md-4">
<input type="hidden" name="projeid" value="<?php echo $_POST['proje_id']; ?>">
<button type="submit" name="add" id="add" class="btn btn-primary btn-md btn-block">Add</button>
</div>
</div>
$('#add').click(function(){
var name = document.getElementById('input1').value;
var action = 'insert';
$.ajax({
url:"data/action.php",
method:"POST",
data: {
name: name,
action: action
},
success:function(data) {
load_data(projid);
}
});
});
--data/action.php--
if($_POST["action"] == "insert") {
$query = "INSERT INTO grundriss (name) VALUES ('".$_POST["name"]."')";
$statement = $db->prepare($query);
$statement->execute();
echo '<p>Data Inserted...</p>';
}

Answer 1

Try to convert image to base64 and then post it with ajax.