Simple example that shows drag and drop file uploads using Vanilla JavaScript and AJAX with a PHP server script to receive and place the file Further features Verify human Support more file formats types Check files md5 Progress tracker uploading lots of files or big single file Option to zip on client side and unzip when received add extra checking packing Version tracking instead of overwritting increments differences or versions Extra options to ignore or overwrite dialogs Speed tracking data upload speed reconnect continue Security checks limit file size number of files on the server dropped connections IP logging maximum allowed uploads Check and restrict file name types e g special characters PASTE features cntrl P creates and uploads file Rename option to edit uploaded files Preview page dates sizes versions style drop_file_zone background color EEE border 999 5px dashed width 290px height 200px padding 8px font size 18px drag_upload_file width 50 margin 0 auto drag_upload_file p text align center drag_upload_file selectfile display none style div id drop_file_zone ondrop upload_file event ondragover return false div id drag_upload_file p Drop file here p p or p p input type button value Select File onclick file_explorer p input type file id selectfile div div div class img content div script var fileobj function upload_file e e preventDefault fileobj e dataTransfer files 0 ajax_file_upload fileobj function file_explorer document getElementById selectfile click document getElementById selectfile onchange function fileobj document getElementById selectfile files 0 ajax_file_upload fileobj function ajax_file_upload file_obj if file_obj undefined var form_data new FormData form_data append file file_obj var xhttp new XMLHttpRequest xhttp open POST singleupload php true xhttp onload function event oOutput document querySelector img content if xhttp status 200 oOutput innerHTML img src this responseText alt The Image else oOutput innerHTML Error xhttp status occurred when trying to upload your file xhttp send form_data script php file singleupload php php arr_file_types image png image gif image jpg image jpeg if in_array _FILES file type arr_file_types echo false return if file_exists uploads mkdir uploads 0777 filename time _ _FILES file name move_uploaded_file _FILES file tmp_name uploads filename echo uploads filename die Multi file version style drop_file_zone background color EEE border 999 5px dashed width 290px height 200px padding 8px font size 18px drag_upload_file width 50 margin 0 auto drag_upload_file p text align center drag_upload_file selectfile display none style div id drop_file_zone ondrop upload_file event ondragover return false div id drag_upload_file p Drop file s here p p or p p input type button value Select File s onclick file_explorer p input type file id selectfile multiple div div script function upload_file e e preventDefault ajax_file_upload e dataTransfer files function file_explorer document getElementById selectfile click document getElementById selectfile onchange function files document getElementById selectfile files ajax_file_upload files function ajax_file_upload files_obj if files_obj undefined var form_data new FormData for i 0 i files_obj length i form_data append file files_obj i var xhttp new XMLHttpRequest xhttp open POST multiupload php true xhttp onload function event if xhttp status 200 alert this responseText else alert Error xhttp status occurred when trying to upload your file xhttp send form_data script php script multiupload php php if file_exists uploads mkdir uploads 0777 foreach _FILES file name as key val filename uniqid _ _FILES file name key move_uploaded_file _FILES file tmp_name key uploads filename echo File s uploaded successfully die
xhttp status occurred when trying to upload your file xhttp send form_data script php file singleupload php php arr_file_types image png image gif image jpg image jpeg if in_array _FILES file type arr_file_types echo false return if file_exists uploads mkdir uploads 0777 filename time _ _FILES file name move_uploaded_file _FILES file tmp_name uploads filename echo uploads filename die Multi file version style drop_file_zone background color EEE border 999 5px dashed width 290px height 200px padding 8px font size 18px drag_upload_file width 50 margin 0 auto drag_upload_file p text align center drag_upload_file selectfile display none style div id drop_file_zone ondrop upload_file event ondragover return false div id drag_upload_file p Drop file s here p p or p p input type button value Select File s onclick file_explorer p input type file id selectfile multiple div div script function upload_file e e preventDefault ajax_file_upload e dataTransfer files function file_explorer document getElementById selectfile click document getElementById selectfile onchange function files document getElementById selectfile files ajax_file_upload files function ajax_file_upload files_obj if files_obj undefined var form_data new FormData for i 0 i files_obj length i form_data append file files_obj i var xhttp new XMLHttpRequest xhttp open POST multiupload php true xhttp onload function event if xhttp status 200 alert this responseText else alert Error xhttp status occurred when trying to upload your file xhttp send form_data script php script multiupload php php if file_exists uploads mkdir uploads 0777 foreach _FILES file name as key val filename uniqid _ _FILES file name key move_uploaded_file _FILES file tmp_name key uploads filename echo File s uploaded successfully die