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