BootStrap uses the file-input plug-in to upload images,

BootStrap uses the file-input plug-in to upload images,

I recently wrote my own personal website and used the bootstrap framework at the front end to find a bootstrap-based Image Upload framework file-input plug-in online when uploading images, this plug-in is very in line with my aesthetic, so a simple record of the use of this plug-in

First, introduce the plug-in css and js files according to your project path.

Note that the locale language file is introduced after the 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, the html code is not a professional front-end, so the front-end code is very bad.

<! -- Modal --> <span style = "white-space: pre "> </span> <div class =" modal fade "id =" myModal "tabindex ="-1 "role =" dialog "aria-labelledby =" mymodabel "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> × <span style =" white-space: pre "> </span> </button> <span style =" white-space: pre "> </span> 

Then, the js Code initializes file-input.
// Initialize the fileinput control (initial initialization) function initFileInput (ctrlName, uploadUrl) {var control = $ ('#' + ctrlName); control. fileinput ({language: 'zh ', // sets the language uploadUrl: uploadUrl, // The uploaded address allowedFileExtensions: ['jpg', 'png ', 'gif'], // The received file suffix showUpload: true, // whether to display the upload button showCaption: false, // whether to display the title browseClass: "btn-primary", // The 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 plug-in.
UpLoadUrl is the access path provided by the background
Note that
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 applies to passing additional parameters that can be used to submit other input box data of the form.
uploadExtraData:{ type:"type", tune:"tune" }
Generally, static data can be directly received after being submitted to the backend, but dynamic data cannot be written in this way, and will not be changed once after initialization.
This problem has been entangled. I spent a lot of time reading the discussions of foreign friends on git and then using the api to solve it.

You can see these after writing them.

The style is quite good. After clicking upload, the entire from data will be submitted to the background.

Many applications of this plug-in found on the Internet are integrated with php. I wrote it in java. Here, the springmvc framework that received the code in the background is very convenient to receive data.



This completes the transmission of data parameters and image parameters, and then the background calls the file upload code to save it to the image.

This plug-in should have a lot of worth studying usage. Here we just briefly talk about how to use it and complete the transmission of dynamic data. Friends who just came into contact with this plug-in can make a little reference.
This article describes how to upload images using the file-input plug-in BootStrap. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!