本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片
代码如下(连接地址: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 智能表单系列 首页