本章介绍如何在生成表单后，可以支持上传图片后可以及时预览图片

代码如下(连接地址：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 智能表单系列 八 表单配置json详解

上一章：BootStrap 智能表单系列 十 自动完成组件的支持

本系列首页：BootStrap 智能表单系列 首页

BootStrap 智能表单系列 九 表单图片上传的支持的更多相关文章

  1. BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)

    本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartF ...

  2. BootStrap 智能表单系列 五 表单依赖插件处理

    这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...

  3. BootStrap 智能表单系列 四 表单布局介绍

    表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...

  4. BootStrap 智能表单系列 八 表单配置json详解

    本章属于该系列的高级部分,将介绍表单中一些列的配置 1.config列的配置: 主要用于控制布局 :config:{autoLayout:true|'1,2,2,4'} true:根据配置项最里层的数 ...

  5. Web---演示Servlet的相关类、表单多参数接收、文件上传简单入门

    说明: Servlet的其他相关类: ServletConfig – 代表Servlet的初始化配置参数. ServletContext – 代表整个Web项目. ServletRequest – 代 ...

  6. servlet文件上传2——复合表单提交（数据获取和文件上传）

    上传文件时表单enctype属性必须要更改为<enctype='multipart/form-data'>:采用post提交表单,元素需要有name属性: 利用第三方jar包(common ...

  7. Ajax模拟Form表单提交，含多种数据上传

    ---恢复内容开始--- Ajax提交表单.使用FormData提交表单数据和上传的文件(这里的后台使用C#获取,你可以使用Java一样获取) 有时候前台的数据提交到后台,不想使用form表单上传,希 ...

  8. 前台提交数据（表单数据、Json数据及上传文件）的类型

    MIME (Multipurpose Internet Mail Extensions) 是描述内容类型的互联网标准.Clients use this content type or media ty ...

  9. 【文件上传】文件上传的form表单提交方式和ajax异步上传方式对比

    一.html 表单代码 …… <input type="file" class="file_one" name="offenderExcelFi ...

随机推荐

  1. Linux下安装QT和OpenGL后QT无法使用OpenGL的解决方法

    我的系统为Ubuntu14.04,用apt-get安装了实现了OpenGl的mesa,QT则是用官网下载的run文件来安装的. 好了,现在两个都分别有了,所以要在qt下尝试写OpenGl代码. 之前试 ...

  2. MYSQL 数据表备份

    方法: mysqldump -uuser_name -p db_name table_nameList >save_file_path 例子: 备份分studio数据库的student 表 my ...

  3. Android切换页面效果的实现二：WebView+ViewPager

    前言: 由于第一种切换页面的效果不能满足项目的要求,于是又找到另外一种更简单好用的方法来实现,顿时感觉,做项目开发,找到一种合适的方法能够减少很多时间,(刚开始自己弄的时候还想着自己写手势识别的方法呢 ...

  4. libvirt C-API

    1,warming-up Specifying URIs to libVirt;name parameter to virConnectOpen or          virConnectOpenR ...

  5. swift3.0 扩展、协议（4）

    扩展和协议是swift中的两个特性,用于对已有的类型进行扩展和修改. 扩展(extension) 向已经存在的类型添加新的功能(属性.方法.下标脚本等等),扩展使用extension关键字定义,语法 ...

  6. 解析微信node开发；拿token

    获取token,本着两个原则, 1.先查询是否有token,有的话判断其时间是否与上一次请求时间差是否超过7100: a.不超过,直接用得到: b.超过,再获取刷新: 2.没有token获取刷新tok ...

  7. Ubuntu下用glade和GTK+开发C语言界面程序(三)——学习make的使用方法

    makefile的规则 makefile的规则例如以下: target ... : prerequisites ... command ... ... target能够是一个object file(目 ...

  8. HTML5阴影与渐变

    一.阴影 阴影的效果,阴影有四个状态值控制,分别是shadowBlur,shadowOffsetX,shadowOffsetY和shadowColor.shadowBlur为阴影的像素模糊值,shad ...

  9. T-SQL语句中中括号([])的用法是什么，什么时候该用

    加了[]是为了防止歧义,使计算机能识别.有些字段可能是关键字,这时候你直接用字段名就会报错,如果加了[]就可以正常执行了

  10. 堆分配与栈分配---SAP C++电面（5）/FEI

    一直以来总是对这个问题的认识比较朦胧,我相信很多朋友也是这样的,总是听到内存一会在栈上分配,一会又在堆上分配,那么它们之间到底是怎么的区别呢?为了说明这个问题,我们先来看一下内存内部的组织情况． 从上 ...