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 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
jQuery学习2 选择器的使用说明
Feb 07 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
JavaScript 是什么意思
Sep 22 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
原生JS实现的雪花飘落动画效果
May 03 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
vue学习笔记之作用域插槽实例分析
Feb 01 Javascript
JS 创建对象的模式实例小结
Apr 28 Javascript
Postman内建变量常用方法实例解析
Jul 28 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
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
一个简单的弹性返回顶部JS代码实现介绍
2013/06/09 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
2017/02/16 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
python实现列表的排序方法分享
2019/07/01 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
python定位xpath 节点位置的方法
2019/08/27 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
python opencv实现图像配准与比较
2021/02/09 Python
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
开会迟到检讨书
2014/01/08 职场文书
群众路线对照检查材料
2014/09/22 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
郭明义电影观后感
2015/06/08 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript