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

代码如下(连接地址：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. Oracle单个数据文件超过32G后扩容

    Oracle单个数据文件超过32G后扩容   表空间数据文件容量与DB_BLOCK_SIZE的设置有关,而这个参数在创建数据库实例的时候就已经指定.DB_BLOCK_SIZE参数可以设置为4K.8K. ...

  2. ArcEngine 9.3 学习笔记(六)：图层符号化（COlorRamp，MarkerSymbol，LineSymbol，FillSymbol，TextSymbol，3DChartSymbol，使用ServerStyle符号库，FeatureRender，RasterRender）

    第四章 图层符号化 AE9.3 提供了SymbologyControl控件,用于显示ARCGIS符号库中的符号. 组件库中的组件对象分为Color(颜色),Symbol(符号),Render(渲染)三 ...

  3. #pragma anon_unions, #pragma no_anon_unions

    #pragma anon_unions, #pragma no_anon_unions 这些编译指示启用和禁用对匿名结构和联合的支持. 缺省设置 缺省值为 #pragma no_anon_unions ...

  4. Qt for Windows：使用WinPcap开发高性能UDP服务器

    首先介绍一下WinPcap WinPcap是Windows下一个网络库,性能极其强悍而且能够接收各种包. 大名鼎鼎的WireShark就是基于这个库开发的. 那么这个库性能到底有多高呢. 我测试了UD ...

  5. ajax与算法，sql的group处理

    function correctAction(){ $semester_id = $this->_getParam("semester_id"); $day = $this- ...

  6. Codechef Nuclear Reactors 题解

    There are K nuclear reactor chambers labelled from 0 to K-1. Particles are bombarded onto chamber 0. ...

  7. 设计模式之PHP项目应用——单例模式设计Memcache和Redis操作类

    1 单例模式简单介绍 单例模式是一种经常使用的软件设计模式. 在它的核心结构中仅仅包括一个被称为单例类的特殊类. 通过单例模式能够保证系统中一个类仅仅有一个实例并且该实例易于外界訪问.从而方便对实例个 ...

  8. Struts2.x教程(一) Struts2介绍

    一.Struts2是什么 Struts2是在WebWork2基础发展而来的.和Struts1一样, Struts2也是基于MVC的web层框架. 那么既然有了Struts1,为何还要Struts2? ...

  9. css滤镜(转载)

    STYLE="filter:filtername(fparameter1, fparameter2...)" (Filtername为滤镜的名称,fparameter1.fpara ...

  10. 异常java.lang.IllegalStateException的解决

    在初始化viewPagerAdapter时,显示异常.从网上找了找有两类这样的问题,一种是说给一个视图设置了两个父类,如: TextView tv = new TextView();layout.ad ...