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

I am developing an application that uses HTML and JS for front end for back-end. I have the following code, which should be functional: 1, when clicking on a background image, users can choose photos from there as a new background image, and to save image on the server and get image paths You can use PHP for In Path Databases, then send back new paths with JSON, and display the selected background as a new background image. Thanks for any help.

Javascript to send and retrieve data:

  function upload image ({{$ ("# newProfileImage"). Click (); } Function profile image selected (file input) {var xhr = new XMLHttpRequest (); Xhr.open ("Post", "UploadProfile Image .php", true); Var formatta = new form data (); FormData.append ("file", fileInput.files [0]); Xhr.send (formData); Xhr.onload = function () {warning (xhr.responseText); // Test the information given from PHP If (xhr.responseText! = "") {$ ("# Profile Background Image") SetAttribute ("src", xhr.responseText); } And {warnings ("Failed to upload your file"); }}}  

HTML code to call Javascript:

& Lt; / Div & gt; & Lt; Input type = "file" id = "newProfileImage" style = "display: none;" Onchange = "profileImageSelected (this)" />

PHP code to get the path:

  & lt ;? Php if (is_uploaded_file ($ _ files ['file'] ['tmp_name'])) // if user upload file {if (! File_exists (".img / EventImages /". $ _FILES ["file"] [" Name "]) {if (move_uploaded_file ($ _ FILES [" file "] [" tmp_name "]," ./img/EventImages/ ". $ $ _FILES [" file "] [" name "])) {echo "IMG / Event Image /" $ _FILES ["File"] ["Name"]; }} And {echo "IMG / Event Image /" $ _FILES ["file"] ["name"]; }}? & Gt;  

You should use some libraries such as without uploading the file to upload Uploadify