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 表示圖片上傳成功！

運行截圖：

上一章：BootStrap 智能表單系列 八 表單配置json詳解

上一章：BootStrap 智能表單系列 十 自動完成組件的支持

 

本系列首頁：BootStrap 智能表單系列 首頁