how to post image with ajax without form-data?

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

Typically, you use a `
` for this. And yes, it should have the attribute `enctype="multipart/form-data"`. — waterloomatt, Sep 18 '20 at 11:39
Start with this - https://stackoverflow.com/q/19447435/296555 — waterloomatt, Sep 18 '20 at 11:40
I can't do that because others depend on it. Isn't there a way to do it without submitting form-data? — BURAK, Sep 18 '20 at 11:47
Flagging as a duplicate of https://stackoverflow.com/q/19617996/296555. — waterloomatt, Sep 18 '20 at 13:28
Does this answer your question? [File Upload without Form](https://stackoverflow.com/questions/19617996/file-upload-without-form) — waterloomatt, Sep 18 '20 at 13:28

score 0 · Accepted Answer · answered Sep 18 '20 at 11:51

0

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

answered Sep 18 '20 at 11:51

Morteza Soltanabadiyan

650
3
15

how can i that? – BURAK Sep 18 '20 at 11:53
You can use the HTML5 – Morteza Soltanabadiyan Sep 18 '20 at 11:56

how to post image with ajax without form-data?

1 Answers1