Image Crop and Uploading using JQuery with PHP Ajax

Поділитися
Вставка
  • Опубліковано 19 вер 2024

КОМЕНТАРІ • 104

  • @samogudo
    @samogudo 3 роки тому

    Even though I am implementing it with Django, instead of PHP, this tutorial helped me a lot, thank you ❤

  • @aaronjohnacosta5025
    @aaronjohnacosta5025 4 роки тому

    U are the most helpful person in the world

  • @akshayshrivastav866
    @akshayshrivastav866 5 років тому +3

    Perfect Tutorial, really helped me a lot, this is what i was exactly looking for.

  • @felipedejesus3504
    @felipedejesus3504 4 роки тому

    thank you very much, this video helped me more than others

  • @idnickzom
    @idnickzom 5 років тому +1

    God Bless Webslesson!!

  • @tomhikari5765
    @tomhikari5765 5 років тому +1

    thanks guy! you saved my life!!!

  • @RudiMuryanta
    @RudiMuryanta 5 років тому +3

    Thank you so much. How do i can custom folder for the image result?

    • @RudiMuryanta
      @RudiMuryanta 5 років тому +2

      Oh, I've got. In this line:
      $imageName = time() . '.png';
      I change to:
      $imageName = '../myfolder/'.time().'.jpg';
      Many thanks once more.

  • @BOY-tg3wg
    @BOY-tg3wg 4 роки тому +1

    Terimakasih videonya bermanfaat bagi saya, saya dari Indonesia

  • @KuldarLeement
    @KuldarLeement 4 роки тому +5

    Each time i hear "crop" i need to drink.

  • @manishbatgiri2210
    @manishbatgiri2210 5 років тому +1

    Awesome tutorial, thanks

  • @giamyc2885
    @giamyc2885 3 роки тому

    Thank you so much, it's very helpful

  • @cemenlangemec9507
    @cemenlangemec9507 4 роки тому

    Nice. I really like this. Easy to use.

  • @SuvajitBardhan
    @SuvajitBardhan 6 років тому +1

    Thank u so much !! u r a saviour

  • @drbalontotis2474
    @drbalontotis2474 2 роки тому

    You are great 😎

  • @ansariakram9856
    @ansariakram9856 5 років тому

    Wow bro , It's really useful and understandable. ..

  • @darongoode948
    @darongoode948 6 років тому +1

    Excellent!

  • @mathewt1893
    @mathewt1893 5 років тому +1

    Wow!

  • @BraWayne
    @BraWayne 4 роки тому

    Fantastic tutorial, thank you very much!

  • @Victorg691
    @Victorg691 6 років тому +1

    Good Job.Thank you so much.

  • @yoelnalle727
    @yoelnalle727 3 роки тому

    thanks for the tutorial, this really helped me, I want to ask how to save the cropped image in a specific folder? thank you very much

  • @jeansetone9658
    @jeansetone9658 5 років тому

    you is the best sir

  • @jihedgouay8992
    @jihedgouay8992 4 роки тому

    Thank you so much

  • @gyasuddinansari6201
    @gyasuddinansari6201 6 років тому

    Very helpful video thanks

  • @feliperafael8104
    @feliperafael8104 5 років тому +1

    amazing, thank you

  • @faridrashedlee6850
    @faridrashedlee6850 6 років тому

    Very very nice bro. Thanks

  • @JayPrakash-uo8hw
    @JayPrakash-uo8hw 5 років тому

    Perfect tutorial nice & thank you

  • @jasonbahil19
    @jasonbahil19 5 років тому +1

    Great tutorial, anyway how can I change the destination folder of the cropped image?

    • @johnnzioki9290
      @johnnzioki9290 4 роки тому

      'folder_name/'.$imageName
      That should work

  • @pauljurgens9513
    @pauljurgens9513 5 років тому +1

    I forgot to ask how to Change png to jpeg and set the compression ratio?

  • @vinalip8781
    @vinalip8781 5 років тому

    Very Good Video

  • @CiroEndara
    @CiroEndara 6 років тому

    good explained, thanks for share

  • @corifeumarques1082
    @corifeumarques1082 6 років тому

    Excellent tutorial! Does this plug-in have the option to rotate the image or correct its orientation?

    • @revanslacey
      @revanslacey 4 роки тому

      Yes it does. There is an example on the croppie website.

  • @priyankjain8132
    @priyankjain8132 5 років тому

    thanks for the help buddy......

  • @MauroMB
    @MauroMB 4 роки тому

    EXCELENT!! Thank you!

  • @rv3263
    @rv3263 6 років тому

    Can you make now one for the profile background? Like when you upload you be allowed to move and adjust the way o want

  • @getanehgeto7873
    @getanehgeto7873 5 років тому

    nice person amazed you

  • @mosesnjara4059
    @mosesnjara4059 4 роки тому

    Hello,this is awesome....How do i do this in yii2 MVC framework?

  • @davidespigolon8170
    @davidespigolon8170 3 роки тому

    Can you make a tutorial with multi upload using jquery with preview... If I want I can crop image and I can modify the order for the files

  • @herbertk9266
    @herbertk9266 6 років тому

    Thx man its helpful

  • @elsecretodelsaber3244
    @elsecretodelsaber3244 5 років тому

    si deseo cambiar la ubicación donde se guarda la imagen, que debo hacer?

  • @--INDIAN--TRADER
    @--INDIAN--TRADER 3 роки тому

    1)) why only base64 let the the image be png/ jpg/ jpeg types . 2) how to upload specific width & height image (image co ordanates may vary or any part of the orignal picture but with specific height and width ) // 3 move uploaded file with timestamp // 4 how to check if user has already upload the photo then needs to delete earlier one and replace this new one .. i hope this will make it complete user profile image uplode edit & delete compelte tutorials .

  • @raxitjat9360
    @raxitjat9360 6 років тому

    have you any training center or classes ??....I want to join ...Plz answer...From gujarat

  • @anderson-campos
    @anderson-campos 5 років тому

    If you try send a image again after your cancel the first try the modal dont open, only if you try send a diferent image name. Can you solve this bug? Seems need clear the name of file in the html inputfile.

  • @funnyanimals9586
    @funnyanimals9586 4 роки тому

    blaah good work

  • @G-Code_official
    @G-Code_official 5 років тому

    Hi ,when I set the src attribute of the image , or even if I try to send the whole image tag I could not see the image in the img tag. I checked with setting alerts if the data is proper which I found to correct but somehow the img tag only shows the default icon. can u please help?

  • @rafaelserrano6715
    @rafaelserrano6715 4 роки тому

    ¿como agrego los controladores de rotación?

  • @muhibbullahansary1429
    @muhibbullahansary1429 5 років тому

    Thank You Very Match.

  • @PeradeniyaAgros
    @PeradeniyaAgros 4 роки тому

    How to get the image file name back to the calling program (index.php) as I need to store the same in a database. Can someone please help?

    • @PeradeniyaAgros
      @PeradeniyaAgros 4 роки тому

      Fond a solution myself. Add input field tag just after the IMG tag in upload PHP echo '';
      echo '';
      You can then use the hidden field value to read the file name.

  • @louie8368
    @louie8368 5 років тому

    how to change the crop line indicator to circle? Is it even possible? I want it circle cause my profile photo in my project is circle.

    • @milesdavies117
      @milesdavies117 5 років тому

      It looks like you just have to change the croppie parameters in the viewport from type: 'square' to type: 'circle'

  • @AjayChauhan-kb6pr
    @AjayChauhan-kb6pr 3 роки тому

    how to upload when click submit button. not when crop & upload.

  • @nolialbay8748
    @nolialbay8748 6 років тому

    What do you mean by upload cropped image under working folder? 13:53

  • @pauljurgens9513
    @pauljurgens9513 5 років тому

    Very nice. but please I would like to see a tutorial how to select the Image and upload the croped area to a Server. imagin you offer an user to upload a photo to a social media and the user can croped it oand upload on the fly.

  • @daniellima5087
    @daniellima5087 6 років тому

    Thanks!

  • @gabofulano4038
    @gabofulano4038 4 роки тому

    It's amazing!! but how can I save the image in a bigger size? without move anything in HTML modal

    • @Lukeibol
      @Lukeibol 4 роки тому

      in "$('.crop_image').click(function(event) {" put " size: 'original' "
      like this
      $('.crop_image').click(function(event) {
      $image_crop.croppie('result', {
      type: 'canvas',
      format: 'jpeg',
      size: 'original'
      }).then(function(response) {
      $.ajax({
      url: "upload.php",
      type: "POST",
      data: {
      "image": response
      },
      success: function(data) {
      $('#uploadimageModal').modal('hide');
      $('#uploaded_image').html(data);
      }
      });
      })
      });

    • @rajk9034
      @rajk9034 4 роки тому

      @@Lukeibol nice dude 🔥

    • @rajk9034
      @rajk9034 4 роки тому

      @@Lukeibol where you learnt js ? I want to learn it too.

  • @imranhossainbpp
    @imranhossainbpp 6 років тому

    sir..what i will do if i want to show that croped image in my html site..??

  • @becalav3rta
    @becalav3rta 5 років тому

    How to insert Rotate left/right function ?

  • @macl6789
    @macl6789 4 роки тому

    Why isn't the input inside of a form ?

  • @Felisanee
    @Felisanee 5 років тому

    Nice tutorial! Can you make one with codeigniter ?

  • @rahul_manek
    @rahul_manek 4 роки тому

    when i open site from mobile than the photo rotates left
    what to do ???

  • @MauricioOnetto
    @MauricioOnetto 6 років тому

    Thank you for the tutorial
    When response is over 1MB, the variable POST is not received by PHP
    Do you know why?

    • @SamuelLing
      @SamuelLing 5 років тому +1

      php limits the maximum post size to prevent the script hogging the ram, to upload more than 1m you can change the variable of post_max_size=_M in the php.ini.

  • @marcinmaj3609
    @marcinmaj3609 6 років тому +1

    Why $_POST['image'] input name is diffrent..

    • @sportcity6135
      @sportcity6135 2 роки тому

      That's the ajax variable name call not input file name

  • @deeps0a0
    @deeps0a0 6 років тому

    the height of the modal is too large... how can we decrease it.. and how can we make this look good in mobile version'

    • @revanslacey
      @revanslacey 4 роки тому

      I've had terrible trouble with bootstrap modal boxes on mobile. Can't seem to get rid of the massive shadow.

  • @developeraccount438
    @developeraccount438 5 років тому

    you not share how to save or insert in db, how I can save in Php DB upload or insert method ? share the code pls

  • @crkenterprises8361
    @crkenterprises8361 3 роки тому

    Thanks For Ur Tutorial Sir.... But Rar File is Corrept Sir.. please Help me Sir

  • @clintclarido4243
    @clintclarido4243 6 років тому

    how to directly save the crop image into the database? I am trying to update the profile photo and save it into the database. Please help..

  • @agilasadi5044
    @agilasadi5044 6 років тому

    but this is base64. which means if you were to save it in server, you would have to save this as a database variable. which is NOT good. Can you do it other way around? I want to have the file.

  • @iamxanderGT13
    @iamxanderGT13 6 років тому

    how to directly save the crop image into the database?

  • @izkiam
    @izkiam 5 років тому

    what version of php do you use?

  • @m.w.s.digital8315
    @m.w.s.digital8315 6 років тому

    how can i change dir of cropede image ??

  • @hilleleddineelhakim9493
    @hilleleddineelhakim9493 6 років тому

    please i need tuto how to make script hotel management

  • @HarshaVardhan-co2gs
    @HarshaVardhan-co2gs 5 років тому

    how to store that cropped image to my storage and how can I display that stored path in my database in laravel???

  • @developerstutorial8821
    @developerstutorial8821 4 роки тому

    how can i save it to file folder?

    • @rajk9034
      @rajk9034 4 роки тому

      Create a folder and just add folder name in path of saved image or next to name of file.

  • @aseembk2962
    @aseembk2962 5 років тому

    how to download croppie plugin

  • @bhumikasardana4705
    @bhumikasardana4705 6 років тому

    downloaded source code is showing file damaged error

  • @gedankens4029
    @gedankens4029 3 роки тому

    Why is that poor quality of uploaded image? There is something wrong. Thank you for the video though, it took time to make video, but the result is inacceptable.

  • @nokogawa8139
    @nokogawa8139 5 років тому

    Lmao the voice. So, what do we do after doing that. Say the image is uploaded now, is it still necessary to insert the image path into SQL so that it is tied to the userID?

    • @SamuelLing
      @SamuelLing 5 років тому

      yes, how else do you know that the image is tied to the user's ID ?

  • @BrunoRomeo1
    @BrunoRomeo1 6 років тому

    The download file is corrupted

    • @webslesson
      @webslesson  6 років тому

      Hi, Bruno We have tested file and then after we have upload and we have again download on our end and it working properly, please try again.

    • @BrunoRomeo1
      @BrunoRomeo1 6 років тому

      Was the program WinRAR that was outdated. it worked normal. Thank you so much.

  • @adityamhaske4109
    @adityamhaske4109 5 років тому

    Banun de bhava....time nahiye

  • @tronictec
    @tronictec 4 роки тому

    Fantastic!

  •  6 років тому

    thank you for this video

  • @jensysantana8663
    @jensysantana8663 6 років тому

    hi, how i can save and move the img now?

  • @isabelastateuniversityisu7428
    @isabelastateuniversityisu7428 6 років тому

    how to can i save this in databse?