select2、tagsinput等jquery插件和无刷新上传

下拉框加載

select2插件已经在项目里面了

打开food/set.html加载这个插件

{% endblock %}
{%  block css %}
<link href="{{ buildStaticUrl( '/plugins/select2/select2.min.css' ) }}" rel="stylesheet">
{% endblock %}
{% block js %}
<script src="{{ buildStaticUrl( '/plugins/ueditor/ueditor.config.js' ) }}"></script>
<script src="{{ buildStaticUrl( '/plugins/ueditor/ueditor.all.min.js' ) }}"></script>
<script src="{{ buildStaticUrl( '/plugins/ueditor/lang/zh-cn/zh-cn.js' ) }}"></script>

<script src="{{ buildStaticUrl( '/plugins/select2/select2.pinyin.js' ) }}"></script>
<script src="{{ buildStaticUrl( '/plugins/select2/zh-CN.js' ) }}"></script>
<script src="{{ buildStaticUrl( '/plugins/select2/pinyin.core.js' ) }}"></script>

<script src="{{ buildStaticUrl( '/js/food/set.js' ) }}"></script>
{% endblock %}

打開food/set.js，添加初始設置

;
var food_set_ops = {
    init:function () {
        this.eventBind();
        this.initEditor();
    },
    eventBind:function () {
        $(".wrap_food_set select[name=cat_id]").select2({
            language: "zh-CN",
            width: '100%'
        });
    },

標簽插件加載

標簽對應的js在這裏

打开food/set.html加载css js

{% endblock %}
{%  block css %}
<link href="{{ buildStaticUrl( '/plugins/select2/select2.min.css' ) }}" rel="stylesheet">
<link href="{{ buildStaticUrl( '/plugins/tagsinput/jquery.tagsinput.min.css' ) }}" rel="stylesheet">
{% endblock %}
{% block js %}
<script src="{{ buildStaticUrl( '/plugins/ueditor/ueditor.config.js' ) }}"></script>
<script src="{{ buildStaticUrl( '/plugins/ueditor/ueditor.all.min.js' ) }}"></script>
<script src="{{ buildStaticUrl( '/plugins/ueditor/lang/zh-cn/zh-cn.js' ) }}"></script>

<script src="{{ buildStaticUrl( '/plugins/select2/select2.pinyin.js' ) }}"></script>
<script src="{{ buildStaticUrl( '/plugins/select2/zh-CN.js' ) }}"></script>
<script src="{{ buildStaticUrl( '/plugins/select2/pinyin.core.js' ) }}"></script>

<script src="{{ buildStaticUrl( '/plugins/tagsinput/jquery.tagsinput.min.js' ) }}"></script>

<script src="{{ buildStaticUrl( '/js/food/set.js' ) }}"></script>
{% endblock %}

打開food/set.js，加入事件的绑定到空间

        $(".wrap_food_set input[name=tags]").tagsInput({
            width: 'auto',
            height: 40,
            onAddTag: function (tag) {
            },
            onRemoveTag: function (tag) {
            }
        });

这些都是jquery的插件

封面图片空间无刷上传、展示、删除

form表单不能嵌套form表单，可以将form表单提交到iframe

food/set.html添加iframe

</div>
<iframe name="upload_file" class="hide"></iframe>
{% endblock %}

监控表单change，提交submit事件

food/set.js

 $(".wrap_food_set .upload_pic_wrap input[name=pic]").change(function () {
            $(".wrap_food_set .upload_pic_wrap").submit();
        });

此時 點擊封面圖完成上傳 會post一個請求

後端python文件Upload.py添加upload/pic接口對應

@route_upload.route("/pic",methods = [ "GET","POST" ])
def uploadPic():
    file_target = request.files
    upfile = file_target['pic'] if 'pic' in file_target else None
    callback_target = 'window.parent.upload'
    if upfile is None:
        return "<script type='text/javascript'>{0}.error('{1}')</script>".format( callback_target,"上传失败" )

    ret = UploadService.uploadByFile(upfile)
    if ret['code'] != 200:
        return "<script type='text/javascript'>{0}.error('{1}')</script>".format(callback_target, "上传失败：" + ret['msg'])

    return "<script type='text/javascript'>{0}.success('{1}')</script>".format(callback_target,ret['data']['file_key'] )

运行可以看到返回成功

同時 也報錯 success方法我們還沒有定義

food/set.js添加方法的定義

var upload = {
    error: function (msg) {
        common_ops.alert(msg);
    },
    success: function (file_key) {
        if (!file_key) {
            return;
        }
        var html = '<img src="' + common_ops.buildPicUrl(file_key) + '"/>'
                + '<span class="fa fa-times-circle del del_image" data="' + file_key + '"></span>';

        if ($(".upload_pic_wrap .pic-each").size() > 0) {
            $(".upload_pic_wrap .pic-each").html(html);
        } else {
            $(".upload_pic_wrap").append('<span class="pic-each">' + html + '</span>');
        }
    }
};

common.js添加網址瓶裝的方法

    buildUrl:function (path, params) {
        var url = ''+path;
        var _paramUrl = "";
        if (params) {
            _paramUrl = Object.keys(params).map(
                function (k) {
                    return [encodeURIComponent(k), encodeURIComponent(params[k])].join("=");
                }
            ).join("&")
            _paramUrl = '?'+_paramUrl
        }
        return url +_paramUrl
    },
    buildPicUrl:function( img_key ){
        return 'http://127.0.0.1:8999/static/upload/'  + img_key;
    }

可以看到成功上传并且展示

支持图片删除

food/set.js添加

  var food_set_ops = {
      init:function () {
          this.eventBind();
          this.initEditor();
          this.delete_img();
      },
      eventBind:function () {

           $(".wrap_food_set .upload_pic_wrap input[name=pic]").change(function () {
              $(".wrap_food_set .upload_pic_wrap").submit();
          });

          $(".wrap_food_set select[name=cat_id]").select2({
              language: "zh-CN",
              width: '100%'
          });

          $(".wrap_food_set input[name=tags]").tagsInput({
              width: 'auto',
              height: 40,
              onAddTag: function (tag) {
              },
              onRemoveTag: function (tag) {
              }
          });
      },
      initEditor:function () {
          var that = this;
          that.ue = UE.getEditor('editor',{
              toolbars: [
                  [ 'undo', 'redo', '|',
                      'bold', 'italic', 'underline', 'strikethrough', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall',  '|','rowspacingtop', 'rowspacingbottom', 'lineheight'],
                  [ 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                      'directionalityltr', 'directionalityrtl', 'indent', '|',
                      'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                      'link', 'unlink'],
                  [ 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                      'insertimage', 'insertvideo', '|',
                      'horizontal', 'spechars','|','inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols' ]

              ],
              enableAutoSave:true,
              saveInterval:60000,
              elementPathEnabled:false,
              zIndex:4,
              serverUrl:common_ops.buildUrl(  '/upload/ueditor' )
          });
      },
      delete_img: function () {
          $(".wrap_food_set .del_image").unbind().click(function () {
              $(this).parent().remove();
          });
      }
  }

ji就可以成功上传了：

转载请注明：虚坏叔叔 » python flask实战订餐系统微信小程序-46ueditord的select2、tagsinput等jquery插件和无刷新上传