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

代码如下(连接地址：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. canvas1

    canvas学习(一) Canvas 学习之路 (一) canvas 是H5 里面神一样的东西,使得只是通过html和js就能做出非常棒的游戏和画面. 因为对前端无限的爱好,更加对canvas充满好奇 ...

  2. 原来ipad的浏览器也可以直接clip到evernote

    今天才发现是有方法通过邮件方式保存ipad上浏览的内容到evernote,之前以为要反复切换app来做到. 只要在toread.cc登记evernote对应帐号的邮箱,就可以根据toread返回到ev ...

  3. 一个基于Qt的截屏程序

    最近有一个arm板上的程序需要重写用户手册,在网上找了许久,没找到合适的截屏工具.于是只好自己动手做一个了. 因为arm板上有已经有了Qt环境,于是想到用 Qt的QPixmap::grabWindow ...

  4. nginx File not found 错误分析与解决方法

    使用php-fpm解析PHP,出错提示如下:"No input file specified","File not found",原因是php-fpm进程找不到 ...

  5. 面向对象程序设计-C++_课时26拷贝构造Ⅰ_课时27拷贝构造Ⅱ

    一旦写了一个类,给它3个函数: 1default construtor 2virtual destructor 3copy constructor Constructions vs. assignme ...

  6. 快照（Snapshot）

    一.定义: SNIA(存储网络行业协会)对快照(Snapshot)的定义是:关于指定数据集合的一个完全可用拷贝,该拷贝包括相应数据在某个时间点(拷贝开始的时间点)的映像.快照可以是其所表示的数据的一个 ...

  7. 转载:做Java开发这一年 （火龙果软件）

    转载:http://www.uml.org.cn/success/201410205.asp 从去年到现在,从.NET转向Java开发(只是因为项目原因,绝对与平台好坏没有关系)差不多有一年的时间了. ...

  8. Spring——jar包详解

    org.springframework.aop ——Spring的面向切面编程,提供AOP(面向切面编程)的实现 org.springframework.asm——spring 2.5.6的时候需要a ...

  9. nodejs在服务器上运行

     nodejs运行之后,关掉链接,网站运行就会断开,需要安装forever,后台执行. 安装方法如下(在windows和Linux下都能运行)://forever的安装: npm install fo ...

  10. js添加删除元素

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...