如何使用javascript和php获取加载图像的URL - 解析PHP SDK

Question

I'm very new to php and javascript, I'm trying to make a form where you can upload an image and display its preview on the same page, and my code works, the problem is that I need to get that image's URL in order to upload it to my Parse Server. Here's the code I use:

<!-- UPLOAD AVATAR -->
<div class="text-center">
<img id="avatar-img" src="images/80.png" width="100" height="100" class="img-circle img-thumbnail img-responsive"></p>
<input style="display:none" id="input-image-hidden" onchange="document.getElementById('avatar-img').src = window.URL.createObjectURL(this.files[0])" type="file" accept="image/jpeg, image/png">
<button class="btn btn-primary btn-block" onclick="HandleBrowseClick('input-image-hidden');" >Upload an avatar</button>

<p id="theImageURL"></p>

<script type="text/javascript">
getImageURL();

     function HandleBrowseClick(input_image) {
       var fileinput = document.getElementById(input_image);
       fileinput.click();
     }

     function getImageURL() {
         var x = document.getElementById("avatar-img").src;
         document.getElementById("theImageURL").innerHTML = x;
     }

 </script>

So, when i first run my signUp.php page, I can get the URL of my 80.png image, which looks like: http://www.example.com/images/80.png and it get shown into my <p id="theImageURL"></p> tag. I need to get that string and pass it to a php function to upload that image to Parse Server:

    $localFilePath = "URL_OF_MY_PREVIEW_IMAGE";
    $file = ParseFile::createFromFile($localFilePath, "image.jpg");

Any help will be greatly appreciated.

Thanks!