What is Bootstrap?
Bootstrap is a front-end framework for the rapid development of web applications and websites. Bootstrap is based on HTML, CSS, and JAVASCRIPT.
history
Bootstrap was developed by Twitter's Mark Otto and Jacob Thornton. Bootstrap is an open source product released on GitHub in August 2011.
Contents of the Bootstrap package
Basic structure: Bootstrap provides a basic structure with a grid system, link style, and background. This will be explained in detail in the Bootstrap Basic Structure section.
CSS: Bootstrap comes with the following features: global CSS settings, definition of basic HTML element styles, extensible class, and an advanced grid system. This will be explained in detail in the Bootstrap CSS section.
Components: Bootstrap contains more than a dozen reusable components for creating images, drop-down menus, navigation, warning boxes, pop-up boxes, and more. This will be explained in detail in the Layout Components section.
JavaScript Plugin: Bootstrap contains more than a dozen custom jQuery plugins. You can include all the plugins directly or one by one. This will be explained in detail in the Bootstrap plug-in section.
Customization: You can customize Bootstrap components, LESS variables, and jQuery plug-ins to get your own version.
What is introduced above is not the focus of this article. Here is how to upload images after the form is generated, you can preview images in time.
The code is as follows (connection address: https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-img.html):
• Relying on the jquery-file-upload plugin, you need to reference jquery.ui.widget.js, jquery.iframe-transport.js, and jquery.fileload.js
•Call global.Fn.InitPlugin('img','formContainer');formContainer: For form id, narrow the search range, optional
The principle of this plug-in is to upload the picture to the server, and then the server returns the path to the image storage. Finally, when submitting the form, the path to the server storage , parameter description:
id:'can be given at will, mainly used to distinguish'
multiple:'true', whether multiple selection files are allowed during uploading
name: The key to submit when uploading a file
ExtendAttr:
field: When saving the form, the key name sent: optional [single|mutiple|null] If it is single, it means that the uploaded image will replace the existing image, otherwise it will be appended to the current image.
url: The url submitted by uploading the image, you can also modify the default value in global.Fn.InitUploadImage in the global.js file
note: The returned json format by default is: {result:200,imgurl:'......'},result:200 means that the image upload is successful!
Running screenshot:
The above is the full description of the support for the BootStrap smart form practical series (9) form picture upload that the editor introduced to you. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!