投票项目-bootstrap

<script id="src" type="text/tmpl"> //script标签的type写成这个，浏览器会认为他不是javascript脚本，从而不去解析执行里面的内容
  <div class="tab-wrap">
    <table class="table table-bordered item">
      <tbody>
        <tr>
          <td class="one">选项标题</td>
          <td>
            <input type="text" class="form-control" name="item-title[]" placeholder="选项标题">
          </td>
        </tr>
        <tr>
          <td class="one">选项简介</td>
          <td>
            <textarea class="form-control validate" rows="3" placeholder="请描述选项的主要内容,文字内容不超过300字" name="item-info[]"  data-parent=".form-group"  data-valid="maxlength" data-maxlength="300"></textarea>
          </td>
        </tr>
        <tr>
          <td class="one">上传图片</td>
          <td>
            <div class="upload-container clearfix">
              <div class="upload-box fileinput-button upload-box">
                <div class="upload-icon upload-btn">
                  <img src=""  class="upload-img"/>
                </div>
              </div>
              <input type="file" name="file[]" class="file-img"/>
              <button type="button" class="btn btn-info start startUpload">
                <i class="glyphicon glyphicon-upload"></i>
                <span>开始上传</span>
              </button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="remove-wrap">
      <button type="button" class="btn btn-warning js-btn-cancel">删除选项</button>
    </div>
  </div>
</script>

yp.use(['formSubmit'],function(yp) {
  yp.ready(function() {
    var ui = {
      $addBtn: $('#add-btn')
    , $body: $('body')
    , $addWrap: $('#add-wrap')
    , $removeBtn: $('.js-btn-cancel')
    , $sendBtn: $('#js-send-btn')
    , $src: $('#src')
    , $radios: $('.radio input[type=radio]')
    };

    var oPageConfig = window.oPageConfig;
    var oPage = {
      init: function() {
        this.view();
        this.listen();
      }

    , view: function() {
        var self = this;
      }

    , listen: function() {
        var self = this;

        /* 添加选项wrap */
        ui.$addBtn.on('click', function() {
          var $tmpl = $(ui.$src.html());
          $tmpl.insertBefore(ui.$addWrap)
        });
        /* 添加选项wrap end */

        /* 删除选项wrap */
        ui.$body.on('click', '.js-btn-cancel', function() {
          var $this = $(this);
          var $parent = $this.closest('.tab-wrap')
          $parent.remove();
        });
        /* 删除选项wrap end */

        /* 提交表单 */
        $('form').formSubmit({
          callback: function(msg) {
            if (msg.code == 0) {
              bootbox.alert('提交成功！！', function() {});
            } else {
             bootbox.alert(msg.message);
            }
          }
        });
        /* 提交表单 end*/

        /* 图片上传前预览 */
        ui.$body.on('change', '.file-img', function() {
          var $this = $(this)
            , $uploadImg = $this.closest('.upload-container').find('img');
          var objUrl = self.fGetObjectURL(this.files[0]); //建立一個可存取到該file的url
          if (objUrl) {
            $uploadImg.attr("src", objUrl) ;
          }
        });
      }
    , fGetObjectURL: function(file) {
        var self = this;
        var url = null;
        if (window.createObjectURL!=undefined) { // basic
          url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
          url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
          url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
      }
    };
    oPage.init();
  });
});