javascript - How to store image to folder and store the path to database using Ajax? -

javascript - How to store image to folder and store the path to database using Ajax? -

i developing application utilize html , js front-end , php back-end. have next code should have functions that: 1, when click on background image, user can take photo there phone new background image, , utilize php save image on server , image path, store path database, send new path front end json, , display selected image new background image. help.

javascript sending , retrieve data:

function uploadimagedialog() { $("#newprofileimage").click(); } function profileimageselected(fileinput) { var xhr = new xmlhttprequest(); xhr.open("post", "uploadprofileimage.php", true); var formdata = new formdata(); formdata.append("file", fileinput.files[0]); xhr.send(formdata); xhr.onload = function() { alert(xhr.responsetext); //test returned info php. if(xhr.responsetext != ""){ $("#profilebackgroundimage").setattribute("src", xhr.responsetext); } else { alert("your file failed upload"); } } }

html code phone call javascript:

<div style="width:91.5vw;height:78.5vh;margin-top:10.5vh;"> <img class="backgroundimage" id="picturesrc" src="img/jenny.jpg" onclick="uploadimagedialog()" /> </div> <input type="file" id="newprofileimage" style="display:none;" onchange="profileimageselected(this)"/>

php code path:

<?php if(is_uploaded_file($_files['file']['tmp_name'])) // if user uploads file { if (!file_exists("./img/eventimages/" . $_files["file"]["name"])) { if (move_uploaded_file($_files["file"]["tmp_name"], "./img/eventimages/" . $_files["file"]["name"])) { echo "img/eventimages/" . $_files["file"]["name"]; } } else { echo "img/eventimages/" . $_files["file"]["name"]; } } ?>

you should utilize libraries uploadify upload files without posting form.

demo

javascript php html json