Script to upload multiple files using drag and drop in javascript - php

دانلود script آپلود چندین فایل با استفاده کشیدن و رها کردن در javascript - php

در این پست، نحوه ایجاد یا پیاده سازی یک بارگذاری فایل Drag and Dropby usingجاوا script خالصyou will receive This file is mainly intended to provide a reference to IT/CS students and new programmers to handle client and server side file uploads.

بارگذاری فایل با کشیدن و رها کردن چیست؟

Drag-and-drop file upload is a process for managing file uploads on the client side. This allows the end user of a specific system or platform to simply drag and drop the files they want to upload into a specific file drop area on the platform page.

چگونه با استفاده از جاوا script یک فایل Drag-and-Drop ایجاد کنیم؟

Drag and drop functionality can be achieved using JavaScript EventListeners. Here are the following event listeners that can be used to achieve the mentioned functionality:

• ondragover
  • This event listener enables you to create a process, functions, or manipulations that fire when the dragged file hovers over the drop zone.
• ondragleave
  • This event listener enables you to create a process, functions or manipulations that are activated when the dragged file leaves the drop zone.
• ondrop
  • This event listener enables you to create a process, functions, or manipulations that are triggered when the dragged file is dropped in the drop zone.

مثال

Here is a simple web application source code snippet that demonstrates uploading multiple files by drag and drop with a progress bar using the 3 event listeners mentioned above. This app allows end users to upload multiple files by dragging and dropping files into the drop zone of the app. The upload process will be executed on the server using JS HTTP request and PHP script.

رابط

This file is a combined PHP and HTML script to display the file drop area and uploaded files. I used Bootstrap v5 and Fontawesome Icons to design the interface.

Dear user, you are offered a download