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