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

代码如下(连接地址：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. setPluginsEnabled(true) 谁知道android的4.3之后为什么会报错

    我也是最近才遇到这个问题的,查了下资料,setPluginEnable已经弃用了,使用webSettings.setPluginState(WebSettings.PluginState.ON);可以 ...

  2. 如果有三个Bool型变量，请写出一程序得知其中有2个以上变量的值是true

    下面这篇文章是从StackOverflow来的.LZ面试的时候遇到了一道面试题:“如果有三个Bool型变量,请写出一程序得知其中有2个以上变量的值是true”,于是LZ做了下面的这样的程序: bool ...

  3. Unix/Linux环境C编程入门教程(6) 安装Fedora C/C++开发环境

    安装Fedora  C/C++开发环境 1 Fedora 是一个开放的.创新的.前瞻性的操作系统和平台,基于 Linux. 2．选择自定义配置 3.设置版本为10.0 4.选择稍后安装 5.选择64位 ...

  4. thanks使用注意事项；

    router.get('/api/users/search/:key/:page', function(req, res) { if(_.isEmpty(req.params.key)) { res. ...

  5. 开源ceph管理平台inkscope部署手册

    一.前情提要 关于inkscope就不做过多介绍了,就是ceph的一个开源管理控制平台,跟ceph官方的calamary以及intel的VSM差不多一类,只是各自侧重点不一样. 相对而言,因为inks ...

  6. vs2010调试快捷键

    VS2010单步调试  1.设置断点 F9设置或者取消断点,如果当前行未设置断点,则F9可以再当前行设置断点,如果已经设置,则为去除断点   2.单步调试 F10不进入函数单步,F11进入函数单步 , ...

  7. SQL 2008升级SQL 2008 R2完全教程或者10.00.4000升级10.50.1600

    今天将由于需要就将我的SQL 2008升级到SQL 2008 R2. 说到为什么要升级是因为,从另一台机器上备份了一个数据库,到我的机器上还原的时候提示“System.Data.SqlClient.S ...

  8. 在查询用户的权限的时候 使用左外连接 和 access数据库中左外连接

    一般做视图最好是做成左外连接的.而其作用尤其在我们查询用户当前的权限时尤为明显,我们将 权限表即模块表放→角色权限表→角色表→用户角色表→用户表 就这样left outer join 连接起来,这样就 ...

  9. NXT项目准备资料

    聊天资源 http://www.cocoachina.com/ios/20150205/11116.html https://developer.layer.com/docs/ios/quick-st ...

  10. KVC中setValuesForKeysWithDictionary:

    本文转载于:http://my.oschina.net/u/2407613/blog/524879?p={{page}} 从字典映射到一个对象,这是KVC中的一个方法所提供的,这个方法就是 setVa ...