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 相关文章推荐
JavaScript DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
Bootstrap table分页问题汇总
May 30 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 21 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批量生成缩略图的代码
2008/07/19 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
python获得文件创建时间和修改时间的方法
2015/06/30 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
用Python进行websocket接口测试
2020/10/16 Python
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
学校党的群众路线教育实践活动整改措施
2014/10/25 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
学生通报表扬范文
2015/05/04 职场文书
高中运动会前导词
2015/07/20 职场文书
python实现自动化群控的步骤
2021/04/11 Python
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电