upload photo using $.ajax
my target is upload an image on server directly without submit button and in the same time show the preview.
my html:
- <form id='userPhoto' name='userPhoto' method="post" enctype="multipart/form-data">
- <div class="profile-info">
- <div class="profile-photo">
- <div class="image-upload">
- <div class="image-upload">
- <label for="fileToUpload">
- <img id='image' src="{{url('assets/globals/img/faces/9.jpg')}}" alt=''/>
- </label>
- <input type="file" name="fileToUpload" id="fileToUpload">
- </div>
- </div>
- <!-- <img src="{{url('assets/globals/img/faces/9.jpg')}}" alt="">-->
- </div><!--.profile-photo-->
- <div class="profile-text light">
- Tolga Ergin
- <span class="caption">Account id: 123456</span>
- </div><!--.profile-text-->
- </div><!--.profile-info-->
- </form>
this is my js
- $(document).ready(function () {
- function readURL(input) {
- if (input.files && input.files[0]) {
- var reader = new FileReader();
- reader.onload = function (e) {
- $('#image').attr('src', e.target.result);
- };
- reader.readAsDataURL(input.files[0]);
- }
-
- }
-
- $("#fileToUpload").change(function(){
- readURL(this);
- $.ajax({
- url: "../upload.php",
- type: "POST",
- data:new FormData(this),
- contentType: false,
- cache: false,
- processData:false,
- success: function(data)
- {
- ......}
- });
-
- });
- });
I can show the preview of the image, but to the php script ajax don't pass data, I try also with data: $('#userPhoto).serialize() without success.
how I can perform my target?