2018年5月

首页2018年5月
26
May
0

一个方方正正的点击图片放大的脚本(不能支持手势放大缩小)

这个代码显示不是最漂亮的,但它代码漂亮简洁
要显示更加华丽一点的可以用以下插件:
http://photoswipe.com/

html预览图:
<td width="350">

<img class="pimg" height="100" width="100" src="/static/upload/2018_05/20180522_223815_493331.jpg" />
<img class="pimg" height="100" width="100" src="/static/upload/2018_05/20180522_223815_493331.jpg" />
<img class="pimg" height="100" width="100" src="/static/upload/2018_05/20180522_223815_493331.jpg" />

</td>

弹出框的容器:
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:9999;width:100%;height:100%;display:none;">

<div id="innerdiv" style="position:absolute;">
    <img id="bigimg" style="border:5px solid #fff;" src="" />
</div>

</div>

弹出脚本,如果有大小图 可以通过JS改变:
<script>

$(function(){
    $(".pimg").click(function(){
        var _this = $(this);//将当前的pimg元素作为_this传入函数
        imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
    });
});

function imgShow(outerdiv, innerdiv, bigimg, _this){
    var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
    $(bigimg).attr("src", src);//设置#bigimg元素的src属性

        /*获取当前点击图片的真实大小,并显示弹出层及大图*/
    $("<img/>").attr("src", src).load(function(){
        var windowW = $(window).width();//获取当前窗口宽度
        var windowH = $(window).height();//获取当前窗口高度
        var realWidth = this.width;//获取图片真实宽度
        var realHeight = this.height;//获取图片真实高度
        var imgWidth, imgHeight;
        var scale = 0.95;//缩放尺寸,当图片真实宽度和高度大于窗口宽度和高度时进行缩放

        if(realHeight>windowH*scale) {//判断图片高度
            imgHeight = windowH*scale;//如大于窗口高度,图片高度进行缩放
            imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
            if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
                imgWidth = windowW*scale;//再对宽度进行缩放
            }
        } else if(realWidth>windowW*scale) {//如图片高度合适,判断图片宽度
            imgWidth = windowW*scale;//如大于窗口宽度,图片宽度进行缩放
                        imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
        } else {//如果图片真实高度和宽度都符合要求,高宽不变
            imgWidth = realWidth;
            imgHeight = realHeight;
        }
                $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放

        var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
        var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
        $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
        $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
    });

    $(outerdiv).click(function(){//再次点击淡出消失弹出层
        $(this).fadeOut("fast");
    });
}

</script>

奇怪的是微信原生这段代码在我的手机上跑不起来Y的,空了再来找原因:
<script type="text/javascript">
var pic_list=['/static/upload/2018_05/20180522_223815_493331.jpg','/static/upload/2018_05/20180522_223815_493331.jpg'];
//点击图片时调用,groupid组号,index索引号
function showImg(groupid, index) {

alert('sss');
WeixinJSBridge.invoke('imagePreview', {
    'current' : pic_list[0],
    'urls' : pic_list
});

}
</script>

24
May
0

django国际化

主要分为settings设置,创建本地化文件夹,和命令几个部分

win7上安装gettext支持库,主要出的问题 有两个:

  1. Can't find msguniq. Make sure you have GNU gettext tools 0.15 or newer installed.
    此问题是安装了错误的版本,如64位系统装了32位
  2. Unable to find a locale path to store translations for file __init__.py
    此问题是本地的目录未创建

gettext 官方下载地址:
https://mlocati.github.io/articles/gettext-iconv-windows.html

接下来是几处设置

  1. settings.py
    MIDDLEWARE = [

    'django.middleware.locale.LocaleMiddleware',   # 添加此行

    ]

LANGUAGES = (

('en', ('English')),
('zh-hans', ('中文简体')),
('zh-hant', ('中文繁體')),

)

TEMPLATE_CONTEXT_PROCESSORS = (

"django.core.context_processors.i18n",

)

LOCALE_PATHS = (

os.path.join(BASE_DIR, 'locale'),

)

LANGUAGE_CODE = 'zh-hans'

TIME_ZONE = 'Asia/Shanghai'

USE_I18N = True

USE_L10N = True

USE_TZ = True

2.在项目中修改要翻译的文字信息
from django.utils.translation import ugettext as _
output = _("Welcome to my site.")

模板中使用
{% load i18n %} #头上需要加此标签
a.<title>{% trans "This is the title." %}</title>
与{% trans %}模板标签不同,blocktrans标签允许你通过使用占位符来标记由文字和可变内容组成的复杂句子进行翻译,如下例所示:
b.{% blocktrans %}This string will have {{ value }} inside.{% endblocktrans %}

3.最后生成语言文件:
python manage.py makemessages -l zh_hans
python manage.py makemessages -l en
python manage.py makemessages -l zh_hant

4.编译为PO文件:
django-admin compilemessages

64位32位1.15版本
gettext0.19.8.1-iconv1.15-shared-32 -64.rar

22
May
0

django的session配置

SESSION_ENGINE = 'django.contrib.sessions.backends.db' # 引擎(默认)

SESSION_COOKIE_NAME = "sessionid" # Session的cookie保存在浏览器上时的key,即:sessionid=随机字符串(默认)
SESSION_COOKIE_PATH = "/" # Session的cookie保存的路径(默认)
SESSION_COOKIE_DOMAIN = None # Session的cookie保存的域名(默认)
SESSION_COOKIE_SECURE = False # 是否Https传输cookie(默认)
SESSION_COOKIE_HTTPONLY = True # 是否Session的cookie只支持http传输(默认)
SESSION_COOKIE_AGE = 1209600 # Session的cookie失效日期(2周)(默认)
SESSION_EXPIRE_AT_BROWSER_CLOSE = False # 是否关闭浏览器使得Session过期(默认)
SESSION_SAVE_EVERY_REQUEST = False # 是否每次请求都保存Session,默认修改之后才保存(默认)

这个好。settings里设为true,超时时间按照最后一次客户端请求计算,如上按照最后一次请求之后10秒失效

数据库Session

SESSION_ENGINE = 'django.contrib.sessions.backends.db'   # 引擎(默认)

缓存Session

SESSION_ENGINE = 'django.contrib.sessions.backends.cache'  # 引擎
SESSION_CACHE_ALIAS = 'default'  # 使用的缓存别名(默认内存缓存,也可以是memcache),此处别名依赖缓存的设置
# 连接memcache 的配置,缓存部分会提到。不支持redis,连它需要安装插件

文件Session

SESSION_ENGINE = 'django.contrib.sessions.backends.file'    # 引擎
SESSION_FILE_PATH = os.path.join(BASE_DIR, 'cache')  # 放到cache目录下
SESSION_FILE_PATH = None   # 缓存文件路径,如果为None,则使用tempfile模块获取一个临时地址tempfile.gettempdir()
# 如:/var/folders/d3/j9tj0gz93dg06bmwxmhh6_xm0000gn/T

缓存+数据库Session

SESSION_ENGINE = 'django.contrib.sessions.backends.cached_db'  # 引擎

加密cookie Session (都放到cookie里面,只是做了加密处理)

SESSION_ENGINE = 'django.contrib.sessions.backends.signed_cookies'  # 引擎

ajax里设置session
document.cookie=mycookie;
$.cookie('csrftoken')

20
May
0

公众号上传图片(DJANGO)

使用WEUI自带上传控件

HTML端:
<div class="weui-cells weui-cells_form">

<form method="post">
    <div class="weui-cells__title">附件</div>
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <div class="weui-uploader__bd">

{# <li class="weui-uploader__file" style="background-image:url(http://imgsize.ph.126.net/?imgurl=http://cms-bucket.nosdn.127.net/ba2d23de68ad4dcc8ed67622f911f14c20170113154227.png_140x88x1x85.jpg)">#}
{# </li>#}

                <div class="weui-uploader__input-box">
                    <input id="uploaderInput" class="weui-uploader__input js_file" type="file" accept="image/*" multiple>
                </div>
            </div>
        </div>
    </div>

</form>

</div>

js端:
base64 是预览的小图片
e.target.result 这个是源文件

<script>

imgfiles = [];
$(function() {
    // 允许上传的图片类型
    var allowTypes = [ 'image/jpg', 'image/jpeg', 'image/png', 'image/gif' ];
    // 1024KB,也就是 1MB
    var maxSize = 1024 * 1024 * 10;
    // 图片最大宽度
    var maxWidth = 300;
    // 最大上传图片数量
    var maxCount = 20;
    $('.js_file').on('change', function(event) {
        var files = event.target.files;
        // 如果没有选中文件,直接返回
        if (files.length === 0) {
            return;
        }
        for (var i = 0, len = files.length; i < len; i++) {
            var file = files[i];
            var reader = new FileReader();
            // 如果类型不在允许的类型范围内
            if (allowTypes.indexOf(file.type) === -1) {
                $.weui.alert({
                    text : '该类型不允许上传'
                });
                continue;
            }
            if (file.size > maxSize) {
                $.weui.alert({
                    text : '图片太大,不允许上传'
                });
                continue;
            }
            if ($('.weui_uploader_file').length >= maxCount) {
                $.weui.alert({
                    text : '最多只能上传' + maxCount + '张图片'
                });
                return;
            }
            reader.onload = function(e) {
                var img = new Image();
                img.onload = function() {
                    // 不要超出最大宽度
                    var w = Math.min(maxWidth, img.width);
                    // 高度按比例计算
                    var h = img.height * (w / img.width);
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');
                    // 设置 canvas 的宽度和高度
                    canvas.width = w;
                    canvas.height = h;
                    ctx.drawImage(img, 0, 0, w, h);
                    var base64 = canvas.toDataURL('image/png',0.8);
                    // 插入到预览区
                    var $preview = $('<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url('
                            + base64 + ')"><div class="weui-uploader__file-content">0%</div></li>');

                    $('.weui-uploader__files').append($preview);

                    // 然后假装在上传,可以post base64格式,也可以构造blob对象上传,也可以用微信JSSDK上传
                    {#var progress = 0;#}
                    {#function uploading() {#}
                    {#    $preview.find('.weui-uploader__file-content').text(++progress + '%');#}
                    {#    if (progress < 100) {#}
                    {#        setTimeout(uploading, 30);#}
                    {#    } else {#}
                    {#        // 如果是失败,塞一个失败图标#}
                    {#        //$preview.find('.weui-uploader__file-content').html('<i class="weui_icon_warn"></i>');#}
                    {#        $preview.removeClass('weui-uploader__file_status')#}
                    {#                .find('.weui-uploader__file-content')#}
                    {#                .remove();#}
                    {#    }#}
                    {#}#}
                    {#setTimeout(uploading, 30);#}

                    var progress = 20;
                    $preview.find('.weui-uploader__file-content').text(++progress + '%');
                    {#var formData = new FormData();#}
                    {#$.ajax({#}
                    {#    url:"/weixin/api/upload_file",#}
                    {#    data: {#}
                    {#        "file_data": base64,#}
                    {#        "file_name": file.name,#}
                    {#    },#}
                    {#    async:true,#}
                    {#    type:"POST",#}
                        {#contentType:false,#}
                        {#processData:false,#}
                    {#    success:function (data) {#}
                    {#        console.log(data)#}
                    {#        if (data.code == 'success'){#}
                    {#            imgfiles.push(data.data);#}
                    {#            $preview.removeClass('weui-uploader__file_status')#}
                    {#                    .find('.weui-uploader__file-content')#}
                    {#                    .remove();#}
                    {#        }else {#}
                    {#            alert('上传失败:' + data.message);#}
                    {#        }#}
                    {#    },#}
                    {#    error:function (err) {#}
                    {#        console.log(err);#}
                    {#        $preview.find('.weui-uploader__file-content').html('<i class="weui_icon_warn"></i>');#}
                    {#    }#}
                    {#  });#}
                     $.ajax({
                        url:"/weixin/api/upload_file_blob",
                        data: {
                            "file_data": e.target.result,
                            "file_name": file.name,
                        },
                        async:true,
                        type:"POST",
                        {#contentType:false,#}
                        {#processData:false,#}
                        success:function (data) {
                            console.log(data)
                            if (data.code == 'success'){
                                imgfiles.push(data.data);
                                $preview.removeClass('weui-uploader__file_status')
                                        .find('.weui-uploader__file-content')
                                        .remove();
                            }else {
                                alert('上传失败:' + data.message);
                            }
                        },
                        error:function (err) {
                            console.log(err);
                            $preview.find('.weui-uploader__file-content').html('<i class="weui_icon_warn"></i>');
                        }
                      });
                };
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    });
});

</script>

django端:
@csrf_exempt
def upload_file_blob(request):

# print(request.upload_handlers)
if request.POST:
    file_data = request.POST.get('file_data',None)
    file_name = request.POST.get('file_name',None)
    file_ext_name = file_name[file_name.rfind('.'):]
    new_file_name = get_now_datetime_to_filename_s() + file_ext_name
    path = get_static_upload_path()
    with open(path[0] + new_file_name,'wb') as f:
        import base64
        file_data = file_data[file_data.find(',')+1:]
        img = base64.b64decode(file_data)
        f.write(img)

最后别忘了重设DJANGO能上传的最大文件 默认为2.5M不够用的
DATA_UPLOAD_MAX_MEMORY_SIZE = 10240000 这是9M

18
May
0

nginx匹配规则及浏览器自动加反斜线问题

微信图片_20180518151955.png
匹配文件类型的方式: ~ .*.(gif|jpg|jpeg|png)

如果一直出现403 没有权限 则可能是 配置文件第一行 user nobody引起 修改为root则可

server {
    listen       80;
    server_name  gitsmtest.evun.cn;
    server_name  10.86.42.131;
    access_log logs/12345.access.log;
    server_name_in_redirect off;   //不加这行 如果资源不存在 则会在path后面自动加/ 然后浏览器会记住 只有重启浏览器才能恢复正常

    location / {
        root /home/geely/html;
        proxy_pass   http://127.0.0.1:8080;
    }
    location ~ /[\s\S]*.(gif|jpg|jpeg|png|txt)$ {
        root /home/geely/html;
        #expires 30d;
    }
}

静态文件配置,均是在server模块中配置,有两种方式:
1、alias
通过alias关键字,重定义路径,如
server{

listen 7001;
server_name 127.0.0.1;
location /file/ {
    alias /home/china/areas/;
}

}
此时,通过浏览器访问http://127.0.0.1:7001/file/t.txt,则访问服务器的文件是/home/china/areas/t.txt
2、root
通过root关键字,重定义路径,如
server{

listen 7002;
server_name 127.0.0.1;
location / {
    root /home/china/areas/;
}

}
此时,通过浏览器访问http://127.0.0.1:7001/t.txt,则访问服务器的文件是/home/china/areas/t.txt
上述两种方法均可达到目的,区别是它们对路径的解析方式不同,alas会把指定路径当作文件路径,
而root会把指定路径接到文件路径,再进行访问。