Bootstrap Intelligent Form Combat Series (ix) Form picture upload support _javascript tips

What is Bootstrap?

Bootstrap is a front-end framework for rapid development of Web applications and Web sites. 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 Bootstrap Package

Basic structure: Bootstrap provides a basic structure with a grid system, link styles, and backgrounds. This will be explained in detail in the BOOTSTRAP basic structure section.

Css:bootstrap 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.

Component: Bootstrap contains more than 10 reusable components for creating images, drop-down menus, navigation, warning boxes, pop-up boxes, and more. This is explained in detail in the Layout Components section.

JavaScript plugin: Bootstrap contains more than 10 custom JQuery plug-ins. You can include all of the plug-ins directly, or you can include them individually. This will be explained in detail in the Bootstrap plugin section.

Customization: You can customize Bootstrap components, less variables, and jQuery plug-ins to get your own version.

The above introduction is not the focus of this article, below to introduce how to generate a form, you can support the upload of pictures can be timely preview pictures

The code is as follows (Connection address: https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-img.html):

• Rely on jquery-file-upload plug-ins, need to refer to Jquery.ui.widget.js, Jquery.iframe-transport.js, jquery.fileload.js

• Call Global. Fn.initplugin (' img ', ' Formcontainer '); Formcontainer: For form ID, narrow find range, optional

The principle of the plug-in is to upload the picture to the server, and then the server returned to the image store path, the final submission of the form when the path of the picture sent to the server storage , parameter description:

ID: ' Can be arbitrarily given, mainly to distinguish '

Multiple: ' True ' to allow multiple files when uploading

Name: The submitted key when the file is uploaded

Extendattr:

Field: When the form is saved, the key name sent is handle: optional [single|mutiple|null] If single, indicates that the uploaded picture replaces the existing picture, otherwise it is appended to the current picture

URL: Image upload URL, you can also modify the Global.js file in the global.Fn.InitUploadImage inside the default value

Note: This method defaults to accept the returned JSON format as: {result:200,imgurl: ' ... '},result:200 says the picture upload success!

Run Screenshots:

The above is a small series to introduce the Bootstrap intelligent form of the actual Combat series (ix) Form picture upload support of all the narration, 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!