Recently, I am writing my own personal website, the bootstrap framework used on the front end. When I achieved the uploading function of pictures, I found a bootstrap-based image upload framework file-input plug-in on the Internet. This plug-in is very consistent with my aesthetic view, so I will briefly record the use of this plug-in.
First, introduce plugin css and js files according to your project path
Note that locale language files are introduced after fileinput.min.js file
<!-- 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>
Then there is the html code because I am not a professional front-end so the front-end code is very bad and lightly squirt and hit
<!-- Modal Box (Modal) --> <span style="white-space:pre"> </span><div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <span style="white-space:pre"> </span><div> <span style="white-space:pre"> </span><div> <span style="white-space:pre"> </span><div> <span style="white-space:pre"> </span><div> <span style="white-space:pre"> </span><div> <span style="white-space:pre"> </span><button type="button" data-dismiss="modal" aria-hidden="true"> <span style="white-space:pre"> </span>× <span style="white-space:pre"> </span></button> <span style="white-space:pre"> </span><h3 id="myModalLabel" align="center"> <span style="white-space:pre"> </span><b>Added music score information</b> <span style="white-space:pre"> </span></h3> <span style="white-space:pre"> </span></div> <span style="white-space:pre"> </span><div> <span style="white-space:pre"> </span><form id="addForm" role="form" enctype="multipart/form-data"> <span style="white-space:pre"> </span> <div> <span style="white-space:pre"> </span> <span> Score name</span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <input type="text" id="scoreName" name="scoreName" placeholder=""> <span style="white-space:pre"> </span> </div> <span style="white-space:pre"> </span> <div style="display: inline-table; margin-top: 10px;"> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span><span> Score type</span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> </div> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <div style="display: inline-table; margin-top: 10px;margin-left: 90px;"> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <input type="text" id="difficulty" name="difficulty"> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> </div> <span style="white-space:pre"> </span> <div style="margin-top: 10px;"> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <input type="text" id="tune" name="tune"> <span style="white-space:pre"> </span> </div> <span style="white-space:pre"> </span> <div> <span style="white-space:pre"> </span><input id="fileup" type="file"/> <span style="white-space:pre"> </span> </div> <span style="white-space:pre"> </span></form> <span style="white-space:pre"> </span></div> <span style="white-space:pre"> </span></div> <span style="white-space:pre"> </span><div> <span style="white-space:pre"> </span><button type="button" data-dismiss="modal">Close<span style="white-space:pre"> </span></button> <span style="white-space:pre"> </span><!-- <span style="white-space:pre"> </span><!-- <span style="white-space:pre"> </span></div> <span style="white-space:pre"> </span></div><!-- /.modal-content --> <span style="white-space:pre"> </span></div><!-- /.modal --> <span style="white-space:pre"> </span></div>
Then the js code initializes file-input
//Initialize the fileinput control (first initialization) function initFileInput(ctrlName, uploadUrl) { var control = $('#' + ctrlName); control.fileinput({ language: 'zh', //Set the language uploadUrl: uploadUrl, //Uploaded address allowedFileExtensions: ['jpg', 'png','gif'],//Received file suffix showUpload: true, //Does the upload button showCaption: false, //Does the title browser browserClass: "btn btn-primary", //Button style previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", uploadAsync: false, uploadExtraData:function (previewId, index) { var obj = {}; $('#addForm').find('input').each(function() { var id = $(this).attr('id'), val = $(this).val(); obj[id] = val; }); return obj; } }); } //Initialize fileinput initFileInput("fileup", http://localhost:8080/web/guita/addGuitaInfo.action);This code is the core of the plugin
upLoadUrl is the access path given by the background
This is a special paragraph here
uploadExtraData:function (previewId, index) { var obj = {}; $('#addForm').find('input').each(function() { var id = $(this).attr('id'), val = $(this).val(); obj[id] = val; }); return obj; }This code uploadExtraData is suitable for passing additional parameters that can be used to submit form forms for other input box data.
uploadExtraData:{ type:"type", tune:"tune" }Generally, static data can be directly received as shown in the figure above. However, if you write it like this, you will not get dynamic data. The data will only be generated once during initialization and will not change.
I have been confused about this problem for a lot of time. Finally, I read the discussions of foreign friends on git and then refer to the API to solve it.
After writing these, you can see the renderings
The style is still very good. Click to upload it and the entire data from will be submitted to the background.
Many of the plug-in applications I found online are integrated with php. I wrote it in Java. Here I also went to the code received in the background. SpringMvc framework is very convenient to receive data.
In this way, the data parameters and image parameters are passed through, and the background call the code uploaded by the file to save the image
There are many usages worth studying for this plug-in. Here I just briefly talk about how to use it and complete the transmission of dynamic data. Friends who have just come into contact with this plug-in can make a brief reference.
I have introduced so much about BootStrap's method of uploading images using the file-input plug-in. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!