jQuery Tutorial - File Upload With jQuery & Ajax & PHP - Drag And Drop

Поделиться
HTML-код
  • Опубликовано: 18 ноя 2024

Комментарии • 154

  • @raifordhcadevbrookshire539
    @raifordhcadevbrookshire539 4 года назад +1

    I love that you did everything from scratch ... no libraries... no abstractions to the Metal. You just earned a Subscribe my friend and thank you .

  • @anikologr
    @anikologr 3 года назад

    You are the best teacher i ever found in RUclips. Please continue uploading so interesting videos. Thank you for sharing the code!!!

  • @eeebeltran5445
    @eeebeltran5445 4 года назад

    Este men así y todo con su acento de gitano me salvó la vida en tiempos de pandemia, muchas gracias

  • @codopaterne6126
    @codopaterne6126 5 лет назад +1

    This is a great job. Simple and clear. Very helpful. Thanks!

  • @pisuke815
    @pisuke815 5 лет назад +1

    Good tutorial. Whenever you have time, a video for deleting uploaded images (should the user change his mind about the uploaded file) would also be quite helpful

  • @majidamini237
    @majidamini237 4 года назад

    thanks a lot i love your tutorial because you describe every thing from the basics very good

  • @utekuehne338
    @utekuehne338 6 лет назад +1

    Great! With help of your video I succeeded to include Jquery file upload on my page

  • @youtu730
    @youtu730 3 года назад

    What a great tutorial, much clear and simple.

  • @precisionwebdesign415
    @precisionwebdesign415 Год назад

    Thank you very much. Absolutely clear!👍

  • @undisputedking3233
    @undisputedking3233 5 лет назад

    hello nice tutorial. I am very new to php and programing. I couldn't find the responseJSON while inspecting console instead of JSON it shows responseText but its not previewing image and file exists and file uploaded text.

  • @kobetsmatviy
    @kobetsmatviy 4 года назад +1

    What's up! THX for the tutorial!
    But How I can submit whole multiple files instead of each file alone???

    • @kobetsmatviy
      @kobetsmatviy 4 года назад

      I need to submit the package of multiple files after client-side image resizing

  • @anointedgeorge1646
    @anointedgeorge1646 6 лет назад +1

    Coding passive income! You're the man. Keep up the good work man.

  • @odnacum8645
    @odnacum8645 5 лет назад

    How can I register files in the database(MySQL) and then show these files on my page?

  • @axinvillar8437
    @axinvillar8437 7 лет назад +1

    thanks man your tuts are easy to understand love it :)

  • @mo.downhill6760
    @mo.downhill6760 4 года назад

    Could you add remove button on each photo?

  • @helensirenko1764
    @helensirenko1764 4 года назад

    does jquery.fileupload.js file require an admin access or it can be accessed by any user?

  • @MB-zj3er
    @MB-zj3er 3 года назад

    Very helpful - thanks!

  • @lateefladnet4607
    @lateefladnet4607 5 лет назад +1

    Nice Tutorial. Please, can you provide a guide for resumable uploading?

    • @SenaidBacinovic
      @SenaidBacinovic  5 лет назад

      Thank you, definitely!

    • @amodelateef5732
      @amodelateef5732 5 лет назад +1

      @@SenaidBacinovic please how can I use the function formData: function (form) { }. To send and also use form data at server side.

  • @kidando
    @kidando 5 лет назад +1

    Thank you . This tutorial came through for me

  • @malvinokeyo1140
    @malvinokeyo1140 4 года назад

    awesome work, How can i pass extra parameters/data
    to the php file

  •  5 лет назад +1

    Thanks very much

  • @vivekmapare6016
    @vivekmapare6016 3 года назад

    I need to send selected files to .net web api how should I send ..?

  • @cheongjiayun3901
    @cheongjiayun3901 5 лет назад

    excuse me sir, u havent demonstrate the method of uploading file path to database by using the previous tutorial u have uploaded, and can u upload the new tutorial?

  • @mdjiauddin6452
    @mdjiauddin6452 7 лет назад +1

    Very useful. It helps me to learn alternative way of file upload for my project. Thank you. Please keep it up.

    • @SenaidBacinovic
      @SenaidBacinovic  7 лет назад

      Awesome, I am so happy that I could help you. Will do it! :)

  • @adam_selamat
    @adam_selamat 4 года назад

    Always The Best , i Love You Bro ♥♥

  • @ricardopantani1
    @ricardopantani1 6 лет назад

    thanks a lot for the video. But i have a problem, fileuploaddone callback is not working. The file uploads to the server, but no callback.... Help please.

    • @furrom152
      @furrom152 5 лет назад

      I'm having the same problem ... could you somehow resolve it by now?

  • @hakimsouhily8908
    @hakimsouhily8908 6 лет назад

    please what is the best for the site we upload image to mysql or folder

    • @SenaidBacinovic
      @SenaidBacinovic  6 лет назад

      hakim souhily Upload to the folder, and in DB save path to that file if you need it.

    • @hakimsouhily8908
      @hakimsouhily8908 6 лет назад +1

      thank you very much our professor

    • @SenaidBacinovic
      @SenaidBacinovic  6 лет назад

      hakim souhily thank you :)

  • @vivekmisra8605
    @vivekmisra8605 6 лет назад +1

    thanks for useful tutorial.... but how to delete the selected imaGE

    • @SenaidBacinovic
      @SenaidBacinovic  6 лет назад

      Thank you. You can use unlink() function in PHP.

  • @tajweek3789
    @tajweek3789 7 лет назад +1

    Hello. How to send additional form data as id?

    • @SenaidBacinovic
      @SenaidBacinovic  7 лет назад

      In the place where we specify URL, dataType, dropZone etc., you can also add for example:
      formData: {
      name: "Senaid B."
      }

    • @rajmehta6945
      @rajmehta6945 6 лет назад

      And how do you fetch this data in PHP?

  • @uicrative4140
    @uicrative4140 7 лет назад +1

    Thanks i like you tutorials please keep going ....

    • @SenaidBacinovic
      @SenaidBacinovic  7 лет назад

      Awesome, I am so happy that I could help you. Will do it! :)

  • @r.osorio02
    @r.osorio02 3 года назад

    Thank you my friend

  • @AvelingLessnerGarciaR
    @AvelingLessnerGarciaR 7 лет назад +1

    Very nice work! I like it...

    • @SenaidBacinovic
      @SenaidBacinovic  7 лет назад +1

      Aveling Lessner Garcia R. Thank you so much. Appreciate the support. :D

  • @jaysonbadilla7093
    @jaysonbadilla7093 7 лет назад

    It wont let me upload image with file size more than 2 mb even if I cooment out the validation for the file size

    • @SenaidBacinovic
      @SenaidBacinovic  7 лет назад

      Make sure that your hosting doesn't have any limit.

  • @paulhanrahan6728
    @paulhanrahan6728 6 лет назад +1

    Thanks for your help.

  • @marcelschmidt9956
    @marcelschmidt9956 6 лет назад

    14:39 You check the information in the object, but chrome developer tools shows nothing in the console.

    • @marcelschmidt9956
      @marcelschmidt9956 6 лет назад +1

      Forget about it. I've forgot to give the fileupload id to the input field. Great Tutorial until now.

    • @SenaidBacinovic
      @SenaidBacinovic  6 лет назад

      thank you :)

  • @luisadn404
    @luisadn404 7 лет назад +1

    Nice work Senaid! Keep going! :)

    • @SenaidBacinovic
      @SenaidBacinovic  7 лет назад +1

      Luis Ramos Thank you. Appreciate the support. :)

  • @axinvillar8437
    @axinvillar8437 7 лет назад

    hello again sir can i ask a code for a button upload on click before uploading it :)

    • @SenaidBacinovic
      @SenaidBacinovic  7 лет назад

      Hmm, I am not sure that I understand what exactly you want to achieve, can you explain please?

  • @alexaly4982
    @alexaly4982 6 лет назад

    Sir,
    Can you make a video using PHP how to add a pdf file to a post and display it like google document viewer.
    Thanks

    • @SenaidBacinovic
      @SenaidBacinovic  6 лет назад

      Yes, I should be able. Will write it in my notes. :)

    • @alexaly4982
      @alexaly4982 6 лет назад +1

      Thanks for the prompt reply and much appreciated. :)

  • @MyDisal
    @MyDisal 4 года назад

    thank you, this was really helpful :)

  • @RealNaps
    @RealNaps 6 лет назад +1

    youre the best love you sooo sooo sooo much

  • @samathukorala1860
    @samathukorala1860 5 лет назад

    after add file still show no file chose why is that.

  • @tanmaymathur2833
    @tanmaymathur2833 7 лет назад +1

    nice work man

    • @SenaidBacinovic
      @SenaidBacinovic  7 лет назад

      tanmay mathur Thank you. Please, let me know if there is anything else that I can help you with. :)

  • @73dines
    @73dines 4 года назад +1

    Znaci nista node.js ovo-ono? ;)
    Dragi php. :)

  • @cjcabrera2104
    @cjcabrera2104 6 лет назад

    hi sir, how about if i uploaded it with description or any text ??

    • @SenaidBacinovic
      @SenaidBacinovic  6 лет назад

      I am not sure that I understand this. Can you elaborate?

    • @cjcabrera2104
      @cjcabrera2104 6 лет назад

      crud with image upload. i followed your crud tutorial then it gave's me a hard time to put an image upload

    • @cjcabrera2104
      @cjcabrera2104 6 лет назад

      how can i make it with image upload ? some tutorial used form data.

    • @SenaidBacinovic
      @SenaidBacinovic  6 лет назад

      Have you watched any of my videos related to image/file uploading?

    • @cjcabrera2104
      @cjcabrera2104 6 лет назад +1

      Coding Passive Income thnks for your reply. I already solved it.

  • @gamalabomera295
    @gamalabomera295 6 лет назад +1

    .You are great man
    Good work
    Thank you :)

  • @JonasDeVrient
    @JonasDeVrient 7 лет назад +1

    Keep up the good work, luve it!

    • @SenaidBacinovic
      @SenaidBacinovic  7 лет назад +1

      ***** Thank you so much! Appreciate the support. :D

  • @GusInManhattan
    @GusInManhattan 6 лет назад +1

    good job dude.

  • @sravansurepally6524
    @sravansurepally6524 6 лет назад

    I need as it is how it was in github or mainsite

  • @pulgosawr
    @pulgosawr 7 лет назад +1

    Thank you so much! :) God bless

    • @SenaidBacinovic
      @SenaidBacinovic  7 лет назад

      Mark Glenn Nopra It's my pleasure! Thank you. :)

  • @CodeEatTravel_Repeatt
    @CodeEatTravel_Repeatt 5 лет назад

    Sir,
    Please do a tutorial on how to upload multiple pdf files using ajax and insert it into MySQL database.
    Thanks.

    • @RahulSoni-nh8et
      @RahulSoni-nh8et 5 лет назад

      Files are not stored into the database ... The name is just stored ...

  • @mo.downhill6760
    @mo.downhill6760 4 года назад +1

    I like your accent when you talk

    • @SenaidBacinovic
      @SenaidBacinovic  4 года назад +1

      Hehe, thank you :)

    • @mo.downhill6760
      @mo.downhill6760 4 года назад

      @@SenaidBacinovic All the codes are working very fine, except one code function which is
      .on('fileuploadprogressall',function(e, data){},
      I solved that using:
      done: function(e, data){
      console.log(data);} inside $$("#fileupload").fileupload().
      Best Regards for you brother, Keep it up you are awesome!

    • @mo.downhill6760
      @mo.downhill6760 4 года назад

      @@SenaidBacinovic Drop Zone is working fine too.

  • @moynulislam739
    @moynulislam739 4 года назад

    wow that was a awesome tutorial

  • @RahulSoni-nh8et
    @RahulSoni-nh8et 5 лет назад

    Sir it was all good and you made it easy ... but you didn't demonstrate the drag and drop ... Which i was watching for ...
    Please complete it.

    • @MB-zj3er
      @MB-zj3er 3 года назад

      Locate file on your PC, drag into drop area. Works here. Takes some additional coding to drag from website to website.

  • @cheongjiayun3901
    @cheongjiayun3901 5 лет назад

    excuse me, can u demonstrate how to upload the image files to database and display them?

    • @SenaidBacinovic
      @SenaidBacinovic  5 лет назад

      Why would you upload images in database?

    • @cheongjiayun3901
      @cheongjiayun3901 5 лет назад

      I need to know where the uploaded files are located as well as if adding a upload button to insert those files into database

    • @SenaidBacinovic
      @SenaidBacinovic  5 лет назад

      In this tutorial I show you how to upload files and get path to that file, now just store the path to the image in the database, there is no need to save entire image.

    • @cheongjiayun3901
      @cheongjiayun3901 5 лет назад

      @@SenaidBacinovic
      excuse me sir, u havent demonstrate the method of uploading file path to database by using the previous tutorial u have uploaded

  • @erikaristayasa
    @erikaristayasa 6 лет назад

    my responseJSON is not showing nothing, how can i solve this ?

    • @erikaristayasa
      @erikaristayasa 6 лет назад +1

      never mind, it's work now. thanks for tutorial! awesome!

    • @SenaidBacinovic
      @SenaidBacinovic  6 лет назад

      Awesome, glad you made it.

  • @luciferRathbone
    @luciferRathbone 6 лет назад

    sir how to upload video having large size please reply soon I'm waiting.

    • @SenaidBacinovic
      @SenaidBacinovic  6 лет назад

      What is the problem? The method that I showed should work without any problem if your server doesn't have file size limit.

  • @whizucamataru7655
    @whizucamataru7655 3 года назад +1

    thx

  • @sureshkukumati6526
    @sureshkukumati6526 6 лет назад +1

    Thank you....

  • @Dexter101x
    @Dexter101x 6 лет назад

    Is it possible to turn off the ambient music as this might confuse me to think that the neighbours are playing their music loud

    • @SenaidBacinovic
      @SenaidBacinovic  6 лет назад

      It's not.

    • @Dexter101x
      @Dexter101x 6 лет назад

      Coding Passive Income you mean you don’t hear it yet I can?

    • @SenaidBacinovic
      @SenaidBacinovic  6 лет назад

      No, I hear it, and my team inserted it in the post-production. If you have some suggestion for better music, let me know. :)

    • @Dexter101x
      @Dexter101x 6 лет назад +1

      Coding Passive Income the only suggestion is to leave it out, it’s distracting

  • @brunokd2
    @brunokd2 7 лет назад

    How to do this with a submit button?

    • @SenaidBacinovic
      @SenaidBacinovic  7 лет назад

      Here you go: ruclips.net/video/O4MDyzhSY7Y/видео.html

  • @Dexter101x
    @Dexter101x 6 лет назад

    Don't see the point of having a file upload progress, unless the file size is more that 1 Mb in size and/or you are using dial up internet, but thanks for the info, can easily modify to do that

    • @SenaidBacinovic
      @SenaidBacinovic  6 лет назад

      This is just an example, and like always, you need to optimize it for your needs. :)

  • @tajweek3789
    @tajweek3789 7 лет назад +1

    Thank you very rescued

  • @LukasBuenu
    @LukasBuenu 7 лет назад +1

    thanks bro

  • @vahidsalehi6306
    @vahidsalehi6306 6 лет назад +1

    nice job tanks

  • @dimitrijejovanovic6779
    @dimitrijejovanovic6779 6 лет назад +1

    al kidas sa naglaskom :D

  • @wajetejas
    @wajetejas 7 лет назад

    drag and drop functionality is not working

  • @sportentertainment1608
    @sportentertainment1608 7 лет назад

    it did not work,i have gone over and over the video,i even downloaded the source code,my code didn't work.please help me out.here are my code


    Allgospel
    top download
    recent upload
    account
    testimony



    Drag and drop files..






    $(function() {
    var files = $("#files");
    $("fileupload").fileupload({
    url:'upload.php',
    dropZone:'#dropZone',
    dataType: 'json',
    autoUpload: false
    }).on('fileuploadadd', function(e, data){
    var fileTypeAllowed = /.\.(mp4|3gp|avi|flv|mp3)$/i;
    var fileName= data.originalFiles[0]['name'];
    var fileSize= data.originalFiles[0]['size'];
    if(!fileTypeAllowed.test(fileName))
    $("#error").html('only video files are allowed!');
    else if (fileSize > 5000000)
    $("#error").html('Your file is too big! Max allowed size is: 500MB');
    else {
    $("#error").html("");
    data.submit();
    }
    }).on('fileuploaddone', function(e, data){
    var status = data.jqXHR.responseJSON.status;
    var msg = data.jqXHR.responseJSON.msg;
    if (status == 1) {
    var path = data.jqXHR.responseJSON.path;
    $("#files").fadeIn().append('');
    } else
    $("#error").html(msg);
    }).on('fileupoadprogressall', function(e, data){
    var progress = parseInt(data.loaded / data.total * 100, 10);
    $("#progress").html("Completed: " + progress + "%");
    });
    });

  • @USER-GU4GJJURFGJKV
    @USER-GU4GJJURFGJKV 6 лет назад +1

    This guy has a funny voice

    • @SenaidBacinovic
      @SenaidBacinovic  6 лет назад

      John Dow Hehe, yeah, I agree. Like a small girl? :P

  • @saad_o_6101
    @saad_o_6101 2 года назад

    where is drag and drop

  • @sayedasadullahmusavi2101
    @sayedasadullahmusavi2101 6 лет назад

    How I can use from facebook profile plugin to upload images in laravel?

    • @SenaidBacinovic
      @SenaidBacinovic  6 лет назад

      It's very hard to explain without knowing everything that you do so the best advice would be that you find some tutorial how to do it.

  • @richardhaddadau
    @richardhaddadau 4 года назад +1

    This isn't really a good tutorial because it basically tells you how to use someone else's code, whether you understand it or not, and just use their library. I appreciate your time but it fails where it's meant to be helpful and useful.
    How do you upload a file with jQuery? Just download a plugin.Bad advice.
    PS: I did not give you a thumbs down because I still appreciate your time.

  • @InverserPro
    @InverserPro 5 лет назад

    Адская верстка.