jQuery Tutorial – File Upload With jQuery & Ajax & PHP [w/ subs]



00:00:00 – In this tutorial, you will learn how to use jQuery to upload files to your hosting.
00:00:14 – Hey what's up, guys? Senaid here from codingpassiveincome.com.
00:00:18 – The place where I help others to become a web developer, much easier and faster than
00:00:23 – they will do it on they own. If that's something that interests you consider
00:00:28 – subscribing. So, now I'm here at my PHPstorm, I have started a new project.
00:00:34 – The name is jQuery file upload script. I have created images folder and inside
00:00:40 – image folder I have one file logo.png. I have also one folder uploads and an
00:00:47 – empty index.php file. First thing that I'm going to do I will just create
00:00:53 – a normal HTML document, just a basic design for this tutorial.
00:01:09 – So, inside body I'm going to have one div, I will say ID dropZone, which is
00:01:21 – basically the place where I will enable files drag and drop and also will be able to
00:01:27 – select files for upload. Inside a will say

Drag & Drop Files… And
00:01:42 – here I will say, I will have one input type will be file.
00:01:51 – Let's say I will set ID to the file upload. I will give it name attachments and I'm
00:02:06 – going to say it is possible to select multiple files. Above of this part I will
00:02:14 – put one image. It is just my logo, two new lines and down below I will have h1
00:02:32 – Let's say ID will be progress and below that I will have also one ID, where
00:02:45 – later we will append files that the person is uploaded, so it will be just like a
00:02:51 – preview. And pretty much that's it. I will just declare, let's just quickly see, how
00:03:03 – does it go look.
00:03:09 – So, this is the basic design and I will just add some styles. So, that it looks a little
00:03:19 – bit nicer. So let's say for the body, I will say or
00:03:29 – better, let's use like this. And here I will say for the dropZone. As you can
00:03:48 – see I'm using #dropZone, because you are using here ID, if it was class
00:03:55 – use .dropZone and let's say border I will say three pixel – and the color
00:04:03 – is basically my brand color. I can set the padding to 50 pixels and let's say width
00:04:17 – I will say 500 pixels. So let's just see. So as you can see it is in the center, or
00:04:32 – maybe I should just go. I will just use just make it more simple, I will just say
00:04:42 – center, even if this is depression tag, but for this tutorial, it is not that
00:04:49 – much important. So let's say like this and for the files, I will say border
00:04:58 – 1 pixel dotted and I will use the same,
00:05:07 – I will padding 20 pixels width 200 pixels and pretty much that's it.
00:05:24 – So, this is the basic design, I also going the move this, okay.
00:05:38 – Okay, for the dropZone I can also see margin – top 20 pixels.
00:05:58 – So this is our basic design. For now I will just set files display none. Okay, so,
00:06:07 – now the next thing that we need to do once you have some basic design. We are
00:06:12 – going to include jQuery library and also jQuery file upload plugin. So, first
00:06:18 – thing I will go to the code .jQuery.com and here we have a list of all of the
00:06:27 – versions for the jQuery library. I will choose the latest one, go to the minifed,
00:06:32 – and here I will just copy this code. You can also click this button here to copy
00:06:39 – to the clipboard, whatever you like to do. And just before the closing body tag I
00:06:45 – will paste this code in and this is how I love to use it. Okay and now let's just
00:07:00 – the download jQuery. You can just go to the google and type in jQuery file upload
00:07:10 – plugin and after that, we can go to the clone or download and hit download. I will
00:07:22 – just save it to the folder of this tutorial. Save, okay. Go to the shown in folder, I'm
00:07:38 – going to extract here. And now you can see here that we have a lot of the files,
00:07:45 – but the only folder with the files that we need is this one, JS . So, we can just move
00:07:54 – it here and other to delete. Since I have set up some protections, I'm
00:08:08 – on a Linux, I will just quickly allow this files to be executed.
00:08:25 – Okay, and that's it. So now if you are not on a Linux you don't
00:08:31 – need to do what I just did in the terminal. And here I will just say script,
00:08:38 – source and I'm going to search in the JS folder, vendor and here we have just one
00:08:50 – a file. We will include it. I will say type=”text/javascript” and that's it.
00:08:57 – So, I will duplicate this line and just change the source. I will say iframe – transport.js
00:09:07 – and we need one more file. It is jQuery.fileupload.js. And now
00:09:20 – we have everything that we need for this tutorial. So we are going to write the
00:09:27 – code. So, I will say script type=”text/javascript” and now I will just write
00:09:36 – document ready function. Okay and inside of this function so once the old
00:09:47 – libraries are loaded and the complete document is loaded, this function will
00:09:52 – execute. So I will say here, I will make a reference the files. I will say files.
00:10:02 – The next time when we use it it will be extremely fast and here I'm
00:10:08 – just going to set up some events for this file upload. I will say #”fileupload”.fileupload
00:10:19 – becouse that is the name of our plugin. And inside here I'm going to write some basic
00:10:32 – options. So I will say like this, and we will say URL which is where we are going to upload
00:10:38 – our file. It will be index.php. After that I will say dropZone which is where I
00:10:48 – want to enable dropZone. So as you can see I have already one div with ID. So, I will say here
00:10:58 – dropZone: “#dropZone”. If it was a class here I will say .dropZone.
00:11:07 – Okay, after that I will say dataType, which is what type will be returned from
00:11:15 – the server in the PHP I will use the JSON, you can use text or any you want, but I
00:11:23 – love to use the JSON. And here I am going to say autoupload.false, because I
00:11:35 – want to verified the files before the files are uploaded. And now I'm going to set up
00:11:41 – some events, so I will say .on, and here I will say “fileuploadadd”. So, when some
00:11:53 – file is added, this function here will execute. And I will set up those
00:12:00 – parameters, also I'm going to add another even. I will say “fileuploaddone”, which
00:12:09 – means what happen once the file has been uploaded. So, I will say function (e, data) same
00:12:17 – parameters and this. And last thing is last event is “fileuploadprogressall”, which
00:12:30 – means I'm using the one progress for all files.
00:12:35 – Function,
00:12:42 – and that's it. So now we have set up three events when someone add file, when the files uploaded
00:12:48 – and in the process of uploading files we will just display some
00:12:53 – informations in the percentages. So, let's say, what will happened once the person just
00:13:01 – add the file. So, we are just going to set up, since in this tutorial I will just
00:13:09 – make an upload of image, I will just verify it is an image file. So, I will say
00:13:18 – var fileTypeAllowed and let's say here I will just use a regex.
00:13:26 – So, I will say here / so, I will allow any caracters and after that it will
00:13:36 – go with . and I will allow gif|jpeg|png, okay. So it needs to finish with those,
00:13:51 – through all. So, here now I'm going to say if (!fileTypeAllowed.test).
00:14:01 – Let's say if not. Now I need the name of the file. So let's just quickly show you how to get that.
00:14:13 – So in this data we have some informations. So,
00:14:17 – let's just check those informations. Okay here, let's try. I want you to completely
00:14:28 – understand this tutorial. I will just choose files, let's**** those are some test file.
00:14:36 – So let's say I will use this one. And now here in the console you can see
00:14:41 – some informations this is an object file and inside this object we have a lot of
00:14:47 – different information, but what we are looking for is
00:14:52 – original file. And as you can see here I have some basic informations like
00:14:59 – last modified, last modified date, the name of the file, size, type of the file,
00:15:05 – etc. What we are looking for is the name and the size. We are just going to
00:15:12 – take those two things. So, how you are going to access, we will say data.originalFiles.
00:15:21 – And now it is the first one and we are going to access the name.
00:15:28 – So I will say console data.originalFiles 0 and here I will say name.
00:15:41 – Let's see what will happen. Refresh, choose files let's use this one
00:15:46 – and as you can see the name is myPicture.png. If I choose any other, it will get that.
00:15:53 – and so on. So this is very important. So, if I select all files, you can see
00:16:03 – what will happen. Okay,
00:16:09 – so now we can say var fileName = and for the size you can just say here
00:16:23 – fileSize. Ok and now let's make a test. So if ((|fileTypeAllowed.test (fileName)).
00:16:41 – Let's say we have here error and let's say for the error we
00:16:51 – will set color: red. Okay, here inside this error, I will say error.html
00:17:16 – Only image images are allowed. It's really not important.
00:17:22 – So, let's test now. Choose files, let me use this one. Only image are allowed and if we
00:17:37 – now choose some picture there won't be any message, which is great. Now the next thing
00:17:45 – thing that we want to check is the size. So let's say else if fileSize > 500 KB,
00:18:00 – like this. So it's bigger, sorry.
00:18:04 – We will say (“error”).html('Your file is too big! Max allowed size is :500KB')
00:18:23 – Okay, let's try it. choose files. So now if we
00:18:31 – use this one, we can see that it's picture, but when we try to upload, it says
00:18:38 – “Your files too big! Max allowed size is 500 KB.” And if we try any
00:18:41 – smaller, like this one. Hit open, sorry we need to refresh. Okay, like this one.
00:18:51 – It will work, which is greate. And if we try any other file, there is a problem. So this is
00:19:00 – just great functionality so far. And let's say else. So, if the person is uploading image
00:19:10 – and if that image is not bigger than 500KB, we will
00:19:16 – just allowed the person to upload files. So, I will say else (“error”), let's
00:19:24 – say there won't be any error, which is great. And here I will say data.submit
00:19:35 – which means start uploading this file, because we have checked
00:19:39 – and everything looking good. Okay, so the next thing that I want to do
00:19:45 – is let's say, we are going to create this file upload done. Okay, but in order to
00:19:53 – created we will need to write a code that is on our server, which is
00:19:57 – PHP code. So before that, let me just finish this progress all. So I will
00:20:04 – say here let just check again the data what we have here, so console.log(data).
00:20:12 – Just make sure you understand, F12, choose files, let's use this one. And as you
00:20:21 – can see now we have informations, loaded: zero, total.. Sorry, some problem like
00:20:31 – this. Okay, you have loaded, you have total and you have bitrate. So, now if we want
00:20:40 – to calculate the percentage, we can get directly from the data.loaded and
00:20:48 – data.total. What I'm going to do, I will say here var progress = and have
00:21:02 – use function partInt, just to get an integer value and here I will say
00:21:10 – data.loaded / data.total * 100, because we want to
00:21:21 – get percentage and just this. And I will just say progress.html completed I
00:21:33 – will say here + progress + percent. So let's make a
00:21:43 – test. Choose files, I will use this one, it is complete 100%, because this
00:21:53 – file is really small and for that reason it seems that we just got this, but
00:21:59 – basically it is uploading. We can test that, just by doing this, so I will do
00:22:09 – this just to show you. So now we want check anything,
00:22:15 – we will just allowed any fileType and any fileSize. Let's refresh and let me
00:22:26 – now quickly find some big file. I should have it somewhere. So let's say this one
00:22:37 – 126 MB, open and here we go. You was able to see to still fast.
00:22:45 – Okay, there we go, but if we are checking this on some web
00:22:53 – hosting it will be much slower or if the person doesn't have fast internet
00:22:59 – connection. But since we are checking this on a localhost this is extremely fast.
00:23:04 – So this part has been completed to. And now here in order to make this one I
00:23:14 – will just go and quickly write the PHP code. So at the top of this file I'm going to
00:23:22 – say php if (isset(FILES ['attachments'])).
00:23:38 – We will execute this part of code. Which means if we have requests that file is
00:23:44 – uploading we are going to executed this part of the code. So first I want to show
00:23:51 – you what is inside this variable files. So I will say echo or var_dump($_FILES),
00:24:07 – and let's see and here I will just say echo just it have nicely formatted.
00:24:15 – Let's make a test, go to the choose files choose any file, let's say this one and
00:24:25 – let's see what the server responded, index. And as you can see now here, there is
00:24:32 – a response we have attachment, which is an array, associative array and also
00:24:39 – multidimensional and inside we have name and insade name we have one array with
00:24:45 – index 0. And also we have type, we have temporary name, size, etc. So, in order to
00:24:57 – get the name I will just say target file which is
00:25:02 – where we are going to save our file.basename and here I will say attachments,
00:25:17 – and here as you can see attachments, after that we will say name
00:25:24 – and index 0. And I'm using basename just to get the file name.
00:25:37 – And after that I will check if (file_exists($targetFile)), we will say our
00:25:46 – message will be which will represent the response. I will say status => 0 and
00:25:56 – the reason message I will say “File already exists!”. Else if (move_uploaded_file), which
00:26:13 – means, if we successfully move the file from the temporary location to our
00:26:18 – upload folders. So, I will say FILES['attacments'],
00:26:29 – ['tmp_name'] [0], temporary name 0 to the location targetFile we will say $msg =
00:26:51 – array (“status” =>1), “msg” => “File Has Been Uploaded” and here I will say the path of
00:27:08 – the file is targetFile. Okay and the last thing I will just say exit (json_encode($msg)).
00:27:18 – Okay and just here we can declare this message.
00:27:25 – Okay, so now let's make a test. Choose files, let's see this one index.php.
00:27:36 – And as you can see the response status 1, message “File Has Been Uploaded”, path
00:27:42 – uploads. And let's try again. Okay, now this file already exists. So, now the
00:27:54 – last thing that we need to finish is file upload done. So let's now again
00:28:00 – check what is inside the data. Let's make a test, choose files this one.
00:28:11 – And as you can see here now in the console, it is an object and we have a
00:28:18 – lot of informations again, but what we are looking for is this one and response json.
00:28:27 – So, as you can see the messages is “File
00:28:31 – already exists” and the status is zero. And that is exactly what we have created
00:28:35 – on the server side. So, how we are going to access we will say data.jq here and
00:28:43 – .responseJSON.message. We will say var status = data.responseJSON.status.
00:29:02 – And the same thing we will
00:29:04 – do for message. And we will say if status = 1, means that file has been uploaded.
00:29:18 – We will get a path of the file, so I will just say path and here I will display this
00:29:28 – file inside our files. So, I will say files.append
00:29:35 – or first let's say file.fadeIn, because it's not files hidden right now and
00:29:43 – I will just say append one new paragraph and inside this paragraph, we are going to
00:29:51 – have one image, source. And the source of this image will be our path, that we have
00:29:59 – returned by the server. Okay, and pretty much that's it.
00:30:09 – Else let's say here else if status is not correct we will say error.html our
00:30:20 – message. And let's make a test. So now, we go to choose files, choose the file,
00:30:32 – open and says file already exists. So, let's test another one, I will use this one,
00:30:39 – open and now the file has been uploaded, the result is completed 100%
00:30:46 – and here's a preview of our file. What we can do is I can just for this image
00:30:54 – define style width 100 pixels, height 100 pixels. So, let's just try it, again. Choose
00:31:09 – file, let choose some picture, let's say this one, open and now the file has been uploaded,
00:31:16 – completed 100% and here is a preview. So, if we try again, say this one
00:31:22 – guy, open and it is uploaded. So guys pretty much that's it. I hope that this is a
00:31:31 – very simple and easy to understand tutorial. I hope that to like it, if you
00:31:36 – do please like it and share with your friends and also if you have any
00:31:40 – questions, please ask in the comments below. Take care!


Video Url:
http://youtu.be/M8mLkeP7rB4

Comments

comments