kindeditor插件，发送图片，显示图片，验证码

Posted 2021-02-14 wrqysrt

<script src="/static/kindeditor/kindeditor-all.js"></script>
<script>
  KindEditor.ready(function (y) {
      window.editor = y.create(‘#content‘, {
                width: ‘100%‘,
                height: ‘400px‘,
                resizeType: 0,
                uploadJson: ‘/add_image/‘,
                extraFileUploadParams: {
                    csrfmiddlewaretoken: ‘{{ csrf_token }}‘
                }
            });

  })

$(‘#avatar‘).change(function () {
      file = this.files[0];
      read=new FileReader();
      read.readAsDataURL(file)
      read.onload=function () {
          $(‘#img-file‘).attr(‘src‘, read.result)
      }

})

$(‘#register‘).click(function () {
        key_values=$(‘.form‘).serializeArray()
        form_data=new FormData();
        $.each(key_values,function (index, obj){
            form_data.append(obj.name,obj.value)});
        avatar = $(‘#avatar‘)[0].files[0];
        if (avatar) {
          form_data.append(‘avatar‘, avatar)
        }
        $.ajax({
            url:‘/register/‘,
            type: ‘post‘,
            data: form_data,
            contentType:false,
            processData:false,
            success:function (data) {
                $(‘#myModal‘).modal(‘show‘);
                $(‘.modal-title‘).text(data.msg)
                    $(‘#delete-sure‘).click(function () {
                        window.location=‘http://127.0.0.1:8000/login‘
                    })
            }
        })
        $(".form")[0].reset()

})

$(‘.col-sm-7 ‘).click(function () {
    $(this).next().text("")

});

$(‘.name‘).blur(function () {
      if ($(this).val()){
          if(($(this).val().length>6)){ $(‘.name_p‘).text("输入过长")}
          else if(($(this).val().length<3)){$(‘.name_p‘).text("输入过短")}
          else {
              var name_p = $(‘.name_p‘)
              var name = $(this).val()
              $.ajax({
                  url:‘/check_name/‘,
                  type:‘get‘,
                  data:{‘usr‘:name},
                  success:function (data) {
                      if (data[‘msg‘]==‘error‘){
                          name_p.text(data[‘data‘][‘key‘])
                      }
                  }
              })
          }
      }else{$(‘.name_p‘).text(‘用户名不能为空‘)}
  })

 $(‘#code‘).click(function () {
    url = ‘/login_code/‘;
    var xhr = new XMLHttpRequest();
    xhr.open(‘GET‘, url, true);  // url
    xhr.responseType = "blob";
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                var blod = this.response;
                var src = URL.createObjectURL(blod);  // src
                $(‘#code‘).attr(‘src‘, src);
            }
        }
    };
    xhr.send();

})

画验证码

from PIL import Image,ImageDraw,ImageFont

mf=BytesIO()
color=tuple([random.randint(100,220) for i in range(3)])
image=Image.new(‘RGB‘, (230, 30),color=color)
img_font = ImageFont.truetype(‘static/bootstrap-3.3.7-dist/fonts/kumo.ttf‘, size=28)
img_draw = ImageDraw.Draw(image)
code=‘‘
for i in range(6):
    code1=random.randint(0,9)
    code2=chr(random.randint(65,90))
    code3 = chr(random.randint(97,122))
    code+=str(random.choice([code1,code2,code3]))
for index,i in enumerate(code):
   img_draw.text((5+index*30,0), i, ‘red‘, img_font)
image.save(mf, ‘png‘)
data=mf.getvalue()
return data,code