上传图片，比例限制、大小限制以及本地预览功能

图片本地预览

html

<div><img src="" alt="" class="fmt-img"></div><span class="img">选择文件<input type="file" name="img" class="fmt-inp"></span>

js

//封面图检测以及本地预览$(".fmt-inp").change(function(){    if($.inArray(this.files[0].type,['image/png','image/gif','image/jpg','image/jpeg'])<0){
        console.log('文件格式不正确');        return false;
    }    if(Math.ceil(this.files[0].size/1024)>1024){
        console.log('文件大于1024kb')
    }else{        var obj = getObjectURL(this.files[0]);//获取图片地址
        var target = $(this);        var img = new Image();
        img.src = obj;
        img.onload = function() {            if((img.width/img.height).toFixed(2) == 1.78){
                $(".fmt-img").attr('src',obj);
            }else{
                target.val('');
                console.log('尺寸有误')
            }
        }
    }
});//获取图片的url地址function getObjectURL(file) {    var url = null ;    // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
    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 ;

}      

上一篇：ThinkPHP 5.0.1版本以上自定义配置文件的使用

下一篇：MySQL 正则匹配字段替换内容