BootStrap智能表单实战系列(九)表单图片上传的支持


Posted in Javascript onJune 13, 2016

什么是 Bootstrap?

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

历史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

Bootstrap 包的内容

基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。

CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。

组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。

JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。

定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

以上介绍的不是本文的重点,下面给大家介绍如何在生成表单后,可以支持上传图片后可以及时预览图片

代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-img.html):

•依赖jquery-file-upload插件,需要引用jquery.ui.widget.js、jquery.iframe-transport.js、jquery.fileload.js

•调用global.Fn.InitPlugin('img','formContainer');formContainer:为表单id,缩小查找范围,可选

本插件的原理是将图片上传到服务器,然后服务器返回图片存储的路径,最后提交表单的时候将图片的路径发送给服务器存储参数说明:

id:'可以任意给,主要用来区分'

multiple:'true' ,上传时候是否允许多选文件

name:上传文件时,提交的键

ExtendAttr:

field:保存表单时,发送的键名handle:可选[single|mutiple|null] 如果为single,表示上传的图片会替换现有的图片,否则将追加在当前图片后面

url:图片上传提交的url,你也可以修改global.js文件中的global.Fn.InitUploadImage里面的默认值

note:该方法默认接受返回的json格式为:{result:200,imgurl:'.....'},result:200 表示图片上传成功!

运行截图:

BootStrap智能表单实战系列(九)表单图片上传的支持

以上所述是小编给大家介绍的BootStrap智能表单实战系列(九)表单图片上传的支持 的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
解决vue项目router切换太慢问题
Jul 19 Javascript
浅谈JavaScript对象的创建方式
Jun 13 #Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 #Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 #Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 #Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 #Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 #Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 #Javascript
You might like
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
php 中文和编码判断代码
2010/05/16 PHP
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
Python的动态重新封装的教程
2015/04/11 Python
Python常用库推荐
2016/12/04 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
200行python代码实现2048游戏
2019/07/17 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
使用Python实现批量ping操作方法
2020/05/06 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
评析教师个人的自我评价
2014/02/19 职场文书
小学生综合素质评语
2014/04/23 职场文书
企业授权委托书范本
2014/09/22 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
运动会200米广播稿
2015/08/19 职场文书