澳门正规赌博十大网站-澳门游戏网站
做最好的网站

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

代码如下(链接地址:):

本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面)

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

<!DOCTYPE html>  <html lang="en">            <head>          <meta charset="UTF-8">          <title>基础配置</title>          <link rel="stylesheet"  >          <script src="../lib/jquery.js"></script>          <script src="../lib/bootstrap.js"></script>          <!--工具方法-->          <script src="../scripts/global.js"></script>          <!--插件-->          <script src="../scripts/plugin.js"></script>      </head>            <body>          <div >              <div ><label>基础配置</label></div>              <div >                  <form action="#" id="formContainer" ></form>              </div>          </div>          <div >              <div ><label>介绍</label></div>              <div >                  <h3>支持的表单元素包括:text、select、radio、checkbox、datetime、search、textarea、自定义</h3>              </div>          </div>          <script>              $(function () {                  var eles=[                          {ele:{type:'text',name:'UserName',title:'用户名:'}},                          [                              {ele:{type:'radio',name:'sex',title:'性别:',items:[{text:'男',value:1},{text:'女',value:2}]}},                              {ele:{type:'checkbox', name:'plant',title:'使用平台:',items:[{text:'APP',value:'app'},{text:'web',value:'web'}]}},                             ],                          {ele:{type:'select',name:'province',title:'省份:',withNull:true,items:[{text:'广东',value:'GD'},{text:'湖南',value:'HN'}]}},                          {ele:{type:'datetime',name:'FromeDate',title:'有效期:'}},                          {ele:{type:'search',name:'selectName',title:'选择:'}},                          {ele:{type:'textarea',name:'address',title:'地址:'}},                          {ele:{pre:{text:'<input type="radio" />'},type:'text',name:'pre',title:'叉前面:'}},                          {ele:{next:{text:'<input type="radio" />'},type:'text',name:'next',title:'叉后面:'}},                          {ele:{pre:{text:'<input type="checkbox" />'},next:{text:'$'},type:'text',name:'pre&next',title:'前后皆叉:'}},                  ];                  //隐藏表单元素主要用于编辑时候后台可以区别开来                  var hides = [{ id: 'GUID' }];                        var bsForm = new BSForm({ eles: eles, hides: hides, autoLayout:true }).Render('formContainer');              });          </script>      </body></html>

智能表单系列,表单图片上传的支持。代码如下(连接地址:

智能表单系列,表单图片上传的支持。智能表单系列,表单图片上传的支持。代码如下(连接地址:

主要是下面的js那一块,通过该段js生成form表单

<!DOCTYPE html>  <html lang="en">            <head>          <meta charset="UTF-8">          <title>数据绑定</title>          <meta name="viewport" content="width=device-width, initial-scale=1">          <link rel="stylesheet"  >          <!--自定义站点样式-->          <link rel="stylesheet"  >          <script src="../lib/jquery.js"></script>          <script src="../lib/bootstrap.js"></script>          <!--工具方法-->          <script src="../scripts/global.js"></script>          <!--插件-->          <script src="../scripts/plugin.js"></script>      </head>            <body>          <div >                  <div >                      <label>数据绑定</label>                      <div >                          <button id="btnSubmit" >提交表单</button>                      </div>                  </div>                                <div >                  <form action="#" id="formContainer" ></form>              </div>          </div>          <div >              <div ><label>介绍</label></div>              <div >                  <h3 >表单数据绑定</h3>                      <blockquote>                          <p>将json格式的model绑定到表单中,此处使用模拟的model数据,实际环境中应该是与服务器交互取到数据,在配置对象的是需要一个回调方法,在回到方法里面可以做表单的一些其他操作,如添加表单验证、添加日期插件的支持====</p>                          <p>note:复选框的数据源为数组形式</p>                      </blockquote>              </div>          </div>          <script>              $(function () {                  var eles=[                      [                        {label:{text:'自定义用户名:'},ele:{type:'text',name:'UserName',title:'用户名:',required:true}},                        {ele:{type:'radio',name:'sex',title:'性别:',items:[{text:'男',value:1},{text:'女',value:2}]}},                        {ele:{type:'checkbox', name:'plant',title:'使用平台:',items:[{text:'APP',value:'app'},{text:'web',value:'web'}]}}                        ],                      [                             {ele:{type:'select',name:'province',title:'省份:',withNull:true,items:[{text:'广东',value:'GD'},{text:'湖南',value:'HN'}]}},                             {ele:{pre:{text:'<input type="radio">'},type:'text',name:'displayName',title:'显示名称:'}},                             {ele:{type:'search',title:'产品',id:'ProductName'}}                      ],                      [                          {ele:{type:'datetime',name:'FromeDate',title:'有效期:'}},                          {ele:{type:'datetime',name:'ToDate',title:'~'}},                      ]                  ];                  //隐藏表单元素主要用于编辑时候后台可以区别开来                  var hides = [{ id: 'primaryKey' }];                  var bsForm = new BSForm({ eles: eles, hides: hides, autoLayout: '1,3' }).Render('formContainer',function(bf){                      var model={primaryKey:1,UserName:'xxg',sex:1,plant:['app','web'],province:'GD',displayName:'TEST',ProductName:'笔记本',FromeDate:'2015-06-10',ToDate:'2015-08-08'};                      bf.InitFormData(model);                  });                                    $("#btnSubmit").bind('click',function () {                      var postData=bsForm.GetFormData();                      alert("获取到的表达数据为:" JSON.stringify(postData));                  })              });          </script>      </body></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 表示图片上传成功!

 

此处使用js创建了一个json类型的model,实际开发情况下 会跟服务器交互得到一个model,通过表单插件的InitFormData方法将model显示到form表单中

运行截图:

运行效果图: 

效果图如下:

图片 1

本文由澳门正规赌博十大网站发布于澳门游戏网站,转载请注明出处:智能表单系列,表单图片上传的支持