Bootsrap Upload plugin fileinput simple to use

1. Installation

Download a fileinput file and load the corresponding Css+js file as follows:

<Linkhref= "Css/bootstrap.min.css"rel= "stylesheet"><Linkhref= "Css/fileinput.css"Media= "All"rel= "stylesheet"type= "Text/css" /><Scriptsrc= "Js/jquery-2.0.3.min.js"></Script><Scriptsrc= "Js/fileinput.js"type= "Text/javascript"></Script><Scriptsrc= "Js/bootstrap.min.js"type= "Text/javascript"></Script><Scriptsrc= "Js/fileinput_locale_zh.js"type= "Text/javascript"></Script>

Note: The last JS file is modified language, if not loaded, in the configuration is selected Chinese display is invalid

2. Display

After loading the file, enter the following HTML code in the corresponding form form to display the upload plugin's page as follows:

<class= "Form-group"><input id= "file-1" name= "images[" "type=" File "multiple class=" file "data-overwrite-initial=" false "></div>

The page appears as:

When you choose to upload a file, you will see the following effect:

This time the selection of files can not upload multiple files, you need to configure the following:

$ ("#file-1"). Fileinput ({
Language: ' zh ',//Set language
Loadurl: ' test.php ',//php script for background processing
Llowedfileextensions: [' jpg ', ' png ', ' gif '],//limit file upload type
Overwriteinitial:false,
axfilesize:1000,//limit the size of file uploads
Maxfilesnum:2

});

As you can see, this plugin is an AJAX commit

3. Background processing

The background PHP code to deal with, as follows:

Header("Content-type:text/html;charset=utf-8"); for($i= 0;$i<Count($_files[' Images '] [' Tmp_name ']);$i++){        $dir= ' uploads/'. Time().$_files[' Images '] [' Name '] [$i]; $uploads=Move_uploaded_file($_files[' Images '] [' Tmp_name '] [$i],$dir); }Echo1;//because it's Ajax, it's best to echo a value that allows JS to get

After the upload is successful, the page appears as follows:

There are files in the upload folder, so the upload is successful,

Summary: The experience is good, easy to use, the more troublesome step is the installation (the relevant file must be loaded successfully), the code is not complex

Bootsrap Upload plugin fileinput simple to use