BootStrap 智能表单系列 九 表单图片上传的支持

时间:2022-08-26 21:11:28

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

代码如下(连接地址: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 智能表单系列 九 表单图片上传的支持

上一章:BootStrap 智能表单系列 八 表单配置json详解

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

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