Bootstrap use File-input plugin upload picture method _javascript Skill

Recently in writing their own personal site, the front end of the use of the bootstrap framework, do upload image features online to find a bootstrap image upload frame file-input plug-ins, this plugin does very well in line with my aesthetic, so simply record the use of this plug-in method

First, according to their own project path to introduce plug-ins CSS and JS files

Note that locale language files are introduced after fileinput.min.js files

<!--file input--> 
<link href= ". /.. /css/fileinput.min.css "rel=" stylesheet "> 
<script src=". /.. /js/fileinput.min.js "></script> 
<script src=". /.. /js/locales/zh.js "type=" Text/javascript "></script>

And then the HTML code, because I'm not a professional front end, so the front code writes a lousy pat

<!--modal Box (Modal)--> <span style= "White-space:pre" > </span><div class= "Modal fade" id= "mymodal" tab index= "-1" role= "dialog" aria-labelledby= "Mymodallabel" aria-hidden= "true" > <span style= "White-space:pre" > </span><div class= "Modal-dialog" > <span style= "white-space:pre" > </span><div class= " Modal-content "> <span style=" white-space:pre "> </span><div class=" Modal-header "> <span style = "White-space:pre" > </span><button type= "button" class= "Close" data-dismiss= "modal" aria-hidden= "true" > <span style= "white-space:pre" > </span>x<span style= "White-space:pre" > </span></ button> <span style= "White-space:pre" > </span>
 

And then the JS code initialization file-input

Initializes the Fileinput control (first initialized) 
function initfileinput (ctrlname, Uploadurl) {var controls 
= $ (' # ' + ctrlname); 
Control.fileinput ({ 
language: ' en ',//Set Language 
uploadurl:uploadurl,//upload address 
allowedfileextensions: [' jpg ', ' PNG ', ' gif '],//received file suffix 
showupload:true,//whether to show the upload button 
showcaption:false,//whether 
the caption browseclass: "btn Btn-primary ",//Button style 
Previewfileicon:" <i class= ' Glyphicon glyphicon-king ' ></i> ", 
Uploadasync:false, 
uploadextradata:function (Previewid, index) { 
var obj = {}; 
$ (' #addForm '). Find (' input '). each (the function () { 
var id = $ (this). attr (' id '), val = $ (this). Val (); 
Obj[id] = val; 
}); 
return obj;}} 
); 
Initialization of Fileinput 
initfileinput ("Fileup", http://localhost:8080/web/guita/addGuitaInfo.action);

This code is the core of the plugin.

Uploadurl is the access path to the background.

The special note here is this paragraph.

Uploadextradata:function (Previewid, index) { 
var obj = {}; 
$ (' #addForm '). Find (' input '). each (the function () { 
var id = $ (this). attr (' id '), val = $ (this). Val (); 
Obj[id] = val; 
}); 
return obj; 
}

This piece of code Uploadextradata applies to additional input box data that can be used to submit form forms

uploadextradata:{ 
Type: "type", 
tune: "Tune" 
}

General static data such as the previous image submission background can be directly received but this will not be able to write dynamic Data data will only be generated at the time of initialization will not change
It's a problem that's been bothering me for a long time. Finally, it's up to git to look at the discussions of foreign friends and then refer to the API to get rid

These are written so you can see the effects

The style is still good. Click Upload and the entire from data is submitted to the background

Find a lot of the application of the plug-in online integration of PHP I was written in Java here also on the background received the code SPRINGMVC framework to receive data is very convenient

This completes the data parameters and picture parameters of the transfer and then the background call file upload code stored in the picture can be

This plugin should have a lot to study the usage here is simply to say how to use and complete the transmission of dynamic Data just contact this plugin friends can do a little reference.

About bootstrap use file-input plug-ins upload pictures of the relevant knowledge of the method to introduce so many people, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!