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 相关文章推荐
基于jQuery的js分页代码
Jun 10 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
Bootstrap Table 删除和批量删除
Sep 22 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 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
生成php程序的php代码
2008/04/07 PHP
关于php mvc开发模式的感想
2011/06/28 PHP
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
Sublime Text 3常用插件及安装方法
2015/12/16 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
python中尾递归用法实例详解
2015/04/28 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
中文师范生自荐信
2014/01/30 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
五好家庭申报材料
2014/12/20 职场文书
项目建议书
2015/02/04 职场文书
大二学年个人总结
2015/03/03 职场文书
担保贷款承诺书
2015/04/30 职场文书
繁星春水读书笔记
2015/06/30 职场文书
大学生支教感言
2015/08/01 职场文书
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android