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 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
使用Sticker.js实现贴纸效果
Jan 28 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
关于vue 项目中浏览器跨域的配置问题
Nov 10 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
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
我的论坛源代码(二)
2006/10/09 PHP
推荐个功能齐全的发送PHP邮件类
2007/01/03 PHP
php MessagePack介绍
2013/10/06 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
PHP7引入的"??"和"?:"的区别讲解
2019/04/08 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
Javascript var变量隐式声明方法
2009/10/19 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
javascript学习之json入门
2016/12/22 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
Vue自定义指令写法与个人理解
2019/02/09 Javascript
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
Python实现端口复用实例代码
2014/07/03 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
python 实现Harris角点检测算法
2020/12/11 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
爱岗敬业演讲稿
2014/05/05 职场文书
求职自我推荐信
2014/06/25 职场文书
教师师德考核自我评价
2014/09/13 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
宾馆客房管理制度
2015/08/06 职场文书
python Tkinter模块使用方法详解
2022/04/07 Python
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL