Support multi-file upload, preview, drag-and-drop, Bootstra-based upload plugin fileinput ajax asynchronous upload

First you need to import some JS and CSS files

<link href= "__public__/css/bootstrap.css" rel= "stylesheet" >

<link type= "Text/css" rel= "stylesheet" href= "__public__/css/fileinput.css"/>

<script type= "Text/javascript" src= "__public__/js/bootstrap.min.js" ></script>

<script type= "Text/javascript" src= "__public__/js/jquery.min.js" ></script>
<script type= "Text/javascript" src= "__public__/js/fileinput.js" ></script>

<script type= "Text/javascript" src= "__public__/js/fileinput_locale_zh.js" ></script>//Chinese pack, no need to import

HTML code

<form enctype= "Multipart/form-data">

<input id= "file-1" name= "file" type= "file" multiple class= "file" data-overwrite-initial= "false" data-min-file-count= "1"/>

</form>

JS Code

$ ("#file-1"). Fileinput ({
Uploadurl: ',//must set a path into the PHP code section
Allowedfileextensions: [' jpg ', ' png ', ' gif ', ' txt ', ' zip ', ' ico ', ' jpeg ', ' js ', ' CSS ', ' java ', ' mp3 ', ' mp4 ', ' Doc ', ' docx ', Types of files Allowed
Overwriteinitial:false,
The maximum size of the maxfilesize:1500,//file is K
maxfilesnum:10,//Maximum number of files
Allowedfiletypes: [' Image ', ' video ', ' Flash '],
Slugcallback:function (filename) {
return filename;
}
});

PHP code

$file =$_files[' file '];//gets the information on the file that is called the array form

$date [' file_name '] = $file the name of the [' Name '];//file
$date [' file_size '] = $file the size of the [' ' Size '];//file
$date [' file_type '] = $file the type of the [' ' Type '];//file

Then upload and return an error message or success message with Ajax

Returning directly with Echo is also OK.

Style:

Support multi-file upload, preview, drag-and-drop, Bootstra-based upload plugin fileinput ajax asynchronous upload