پیشنهاد فرادرس

آموزش ساخت File Uploader با قابلیت Drag and Drop

دسته بندی ها: آموزش های یودمی (Udemy) ، آموزش طراحی وب ، آموزش پی اچ پی (PHP) ، آموزش HTML

در این آموزش تصویری نحوه طراحی یک فایل آپلودر با تکنولوژی های PHP ، JavaScript ، HTML ، CSS و AJAX با قابلیت Drag & Drop را می آموزید.

این آموزش محصول موسسه Udemy است.

آپلودری که در این آموزش طراحی می شود علاوه بر قابلیت Drag & Drop قابلیت نمایش میزان آپلود (Progress) را نیز دارد.

سرفصل های دوره آموزشی:

  • معرفی دوره
  • ایجاد یک Udemy Style Drag  و  Drop File Upload System
  • ایجاد یک upload hook
  • آموزش Backend Upload
  • کار با upload جاوا اسکریپت
  • کار با progress bar
  • کار با processed files

لیست سرفصل های دوره آموزشی:

Have you ever wondered how Udemy created their great file uploader for instructors? This course shows you how to build your own file uploader with the advanced feature of drag and drop uploading.

In this course you will learn how to set up your upload server, set the style of your upload page, display an upload progress bar, and write the JavaScript code to make it all come together.

Technical Description

Create a multiple file uploader using the HTML5 Drag & Drop API, with a multiple file selection if not supported. You'll create a reusable JavaScript AJAX uploader that works with any backend language that can upload files and output JSON, although we'll be using PHP here. Finally, we'll pull this all together by using the reusable uploader code to output which files have been uploaded and which ones failed.

Technologies and Languages Used

PHP JavaScript AJAX CSS HTML5 Real World Uses

This file uploader can be used in creating an online learning platform like Udemy or on any other type of website in which file uploads are important. Learning this skill we keep you head and shoulders above the rest of the web dev flock.

Category: Technology What are the requirements? A free code editor Access to a server What am I going to get from this course? Over 11 lectures and 2 hours of content! Set up a file upload and display server Create and style your own file uploader Add a drag and drop functionality to your file uploader Choose which files to accept and which to deny. Display uploaded files What is the target audience? Web developers Web designers Entrepreneurs CURRICULUM SECTION 1: Introduction to the Course 1 Course Introduction 06:29 The quick introduction to the course

Files can be downloaded here.

SECTION 2: Creating a Udemy Style Drag and Drop File Upload System 2 Preparing the Server 03:04 Let us start creating our drop file upload system by getting the server ready.

3 Styling 27:38 Here we shall check the styling options we have.

4 Drag and Drop Hook 10:41 This time students will learn how a drag and drop hook works.

5 Form Upload Hook 04:11 The creation of an upload hook will be discussed here.

6 Backend Upload 14:55 Here we will learn how to upload remotely.

7 JavaScript Upload Part 1 13:35 Working with JavaScript uploads

8 JavaScript Upload Part 2 11:23 More on JavaScript uploads.

9 Progress Bar 06:51 Working with the progress bar.

10 Showing Processed Files 14:14 Working with processed files.

SECTION 3: Conclusion 11 Conclusion 00:13 Thanks for taking the course!

عنوان دوره: Udemy – Create a Drag and Drop File Uploader For Websites حجم فایل: 285MB

آیا این نوشته را دوست داشتید؟
Udemy Create a Drag and Drop File Uploader For Websites

پیشنهاد فرادرس