打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

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

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

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

代码如下(连接地址: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 表示图片上传成功!

运行截图:

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
基于 jQuery UI 的解锁验证(代替验证码)
lazyload.js实现图片异步延迟加载
jquery HtmlBox 插件
提升用户体验的最佳免费 jQuery 表单插件
JQuery教程
jquery js 动态加载 js文件
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服