Skip to main content

Multiple File and Drop Upload

Language


If you are looking for Drag and Drop Multiple File Upload using HTML5 and jQuery then you are at the right place. Kindly take a look at this article, I had created this simple project with using jQuery and PHP that can upload multiple files via drag and drop into a server. This simple project will help you to develop your web applications upload system.

Result

This simple project works in modern browsers like Chrome, Safari, Opera, and Firefox. It will implement this simple project through Ajax and with the use of Form Field.

How to use

Kindly include the jQuery library files available when you click the "Download Code" button below.

Requirements

  • jQuery
  • HTML 5
  • Ajax

JavaScript Code

Kindly copy this link and script to your HEAD tag of your page. All this source code are required.

  1. <script src="js/js_code.js"></script>
  2. <script type="text/javascript" src="js/multiupload.js"></script>
  3. <script type="text/javascript">
  4. var config = {
  5. support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif", // Valid file formats
  6. form: "form_demo_Tutorial", // Form ID
  7. dragArea: "drag_Your_Files", // Upload Area ID
  8. uploadUrl: "upload.php" // Server side upload url
  9. }
  10. $(document).ready(function(){
  11. initMultiUploader(config);
  12. });

HTML5 Source Code

HTML5 drag and drop form field.

  1. <center><h1 class="title" style="color:blue; font-family:cursive;">Multiple Drag and Drop File Upload</h1></center>
  2.  
  3. <div id="drag_Your_Files" class="area_to_Upload">
  4. <h1 style="color:#ccc; font-family:cursive;">Drop Images Here</h1>
  5. </div>
  6.  
  7. <form name="form_demo_Tutorial" id="form_demo_Tutorial" enctype="multipart/form-data">
  8. <input type="file" name="multiUpload" id="multiUpload" multiple style="font-size:18px; color:blue; font-family:cursive; border:1px solid blue; padding:5px;" />
  9. <input type="submit" name="submitHandler" id="submitHandler" value="Upload" class="button_style" />
  10. </form>
  11.  
  12. <div class="progressBar">
  13. <div class="status"></div>
  14. </div>

PHP Source Code

This is the PHP source code for uploading files to the server location in uploads folder and save it as upload.php.

  1. <?php
  2. if($_SERVER['REQUEST_METHOD'] == "POST"){
  3. if(move_uploaded_file($_FILES['file']['tmp_name'], "uploads/".$_FILES['file']['name'])){
  4. echo($_POST['index']);
  5. }
  6. }
  7. ?>

Result

Result

Was this article helpful?

Kindly click the "Download Code" button below for full source code. Thank you very much.

Hope that this tutorial will help you a lot.

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

 

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.