Image Crop and Uploading using JQuery with PHP Ajax

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

КОМЕНТАРІ • 104

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

    U are the most helpful person in the world

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

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

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

    Thank you so much, it's very helpful

  • @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.

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

    God Bless Webslesson!!

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

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

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

    thanks guy! you saved my life!!!

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

    Terimakasih videonya bermanfaat bagi saya, saya dari Indonesia

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

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

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

    Awesome tutorial, thanks

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

    You are great 😎

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

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

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

      'folder_name/'.$imageName
      That should work

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

    Nice. I really like this. Easy to use.

  • @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.

  • @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

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

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

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

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

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

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

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

    Fantastic tutorial, thank you very much!

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

    Thank u so much !! u r a saviour

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

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

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

    Thank you so much

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

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

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

    ¿como agrego los controladores de rotación?

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

    you is the best sir

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

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

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

    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

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

    Good Job.Thank you so much.

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

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

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

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

  • @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.

  • @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.

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

    Very helpful video thanks

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

    Excellent!

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

    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 6 років тому

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

  • @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?

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

    what version of php do you use?

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

    Perfect tutorial nice & thank you

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

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

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

    Very very nice bro. Thanks

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

    thanks for the help buddy......

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

    Wow!

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

    How to insert Rotate left/right function ?

  • @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.

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

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

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

    how to directly save the crop image into the database?

  • @--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 .

  • @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

  • @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.

  • @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..

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

    how can i change dir of cropede image ??

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

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

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

    good explained, thanks for share

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

    EXCELENT!! Thank you!

  • @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

  • @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

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

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

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

    Why isn't the input inside of a form ?

  • @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.

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

    Very Good Video

  • @agil-j4n
    @agil-j4n 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.

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

    Thx man its helpful

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

    downloaded source code is showing file damaged error

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

    blaah good work

  •  6 років тому

    thank you for this video

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

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

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

    Thank You Very Match.

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

    nice person amazed you

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

    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.

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

    please i need tuto how to make script hotel management

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

    Nice tutorial! Can you make one with codeigniter ?

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

    Thanks!

  • @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.

  • @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 ?

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

    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.

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

    Banun de bhava....time nahiye

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

    Fantastic!

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

    how to download croppie plugin

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

    amazing, thank you

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

    how to can i save this in databse?

  • @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.