0

I have page where users can upload a photo to the browser with jQuery but I am now trying to figure how to actually save the photo by sending it to a php script. I understand the php side but don't know how with Jquery to send the photo to php. Do I need to put the input within a form?

jQuery

$(document).ready(function() {
    var readURL = function(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('.profile-pic').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $(".file-upload").on('change', function(){
        readURL(this);
    });

    $(".upload-button").on('click', function() {
        $(".file-upload").click();
    });
});

HTML

<div class="container">
    <div class="row">
        <div class="col-xs-6 test">
            <h1> Upload Profile Image </h1>

            <div class="circle">
                <!-- User Profile Image -->
                <img class="profile-pic" src="https://source.unsplash.com/300x300">
            </div>
            <div class="p-image">
                <i class="fa fa-camera upload-button"></i>
                <form>
                    <input class="file-upload" id="userImage" type="file" accept="image/*"/>
                </form>
            </div>
        </div>
    </div>
</div>
Josh Mein
  • 28,107
  • 15
  • 76
  • 87
JulianJ
  • 1,259
  • 3
  • 22
  • 52
  • You have to decide if you want to do this with a form submit or an ajax request. Either way, both approaches have existing solutions on Stack Overflow that you can find simply by searching. – Taplar Apr 19 '18 at 19:32
  • 4
    Possible duplicate of [How can I upload files asynchronously?](https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously) and [this](https://stackoverflow.com/questions/20818854/upload-image-with-ajax-and-php) and [this](https://stackoverflow.com/questions/29791355/upload-image-using-jquery) and [this](https://stackoverflow.com/questions/23980733/jquery-ajax-file-upload-php), etc – Patrick Q Apr 19 '18 at 19:40

0 Answers0