1.获取图片转成ba
2.图片大小限制
3.图片框高限制
4.图片格式限制
HTML代码:
<div class="container">
<h1>图片转base64上传</h1>
<form method="post">
<div class="div_td">
<div class="editimg" {empty name="emp.idcardpic"}style="display:none"{/empty}>
{empty name="emp"}
<a class="a_editimg" href="javascript:void(0);" onclick="selectFiles(this);" >上传图片</a>
{/empty}
{in name="emp.state" value="0,3"}
<a class="a_editimg" href="javascript:void(0);" onclick="selectFiles(this);" >上传图片</a>
{/in}
<img border="0" width='220' height="120" src="{empty name="emp.idcardpic"}{else/}{$emp.idcardpic}{/empty}" style="padding:0px;border:1px solid rgb(162, 171, 176)">
</div>
{empty name="emp.idcardpic"}
<button onclick="selectFiles(this);" class="btn btn-outline-secondary up-btn" type="button">上传图片</button>
{/empty}
<input type="hidden" class="input" value="{$emp.idcardpic|default=''}" name="idcardpic">
<input class="fileInput" type="file" style="display:none;" accept="image/jpg,image/png,image/jpeg" data-max-size="1024" data-ext="jpg,png,jpeg" onchange="handleFiles(this);"/>
<br>
<div class="alert alert-primary" role="alert">
身份证图片应小于1M,图片格式:jpg,png,jpeg
</div>
</div>
<button class="btn btn-primary" type="submit">submit</button>
</form>
</div>JS代码<script type="text/javascript">
var imgDiv;
//点击选择文件
function selectFiles(obj){
imgDiv = $(obj).parents('.div_td');
imgDiv.find('.fileInput').click();
}
//文件处理
function handleFiles(obj){
imgDiv = $(obj).parents('.div_td');
var files = obj.files; //获取的文件
console.log(files);
var extArr = '*';
var ext = $(obj).data('ext'); //图片扩展名限制
if (typeof(ext) != 'undefined') {
extArr = ext.split(',');
}
console.log('ext arr:',extArr);
var maxWidth = $(obj).data('max-width'); //图片最大宽度限制
var maxHeight = $(obj).data('max-height'); //图片最大高度限制
var maxSize = $(obj).data('max-size'); //图片大小限制
var img = imgDiv.find('img'); //图片框
var input = imgDiv.find('.input'); //隐藏输入框
var imgBox = imgDiv.find('.editimg'); //图片外框
var upBtn = imgDiv.find('.up-btn'); //上传按钮
console.log(img.attr('src'));
$.each(files,function(i,v){
var filename = v.name;
//大小限定
var filesize = v.size;
if (filesize > maxSize*1024) {
alert('文件应小于'+maxSize+'kb');
return false;
}
//后缀
if (extArr != '*') {
var filenameArr = filename.toLowerCase().split('.');
var suffix = filenameArr[filenameArr.length-1];
console.log('image type:',suffix);
if ($.inArray(suffix,extArr) == -1) {
alert('文件格式错误');
return false;
}
}
var type = v.type;
if (/^image\//.test(type)) {
//图片格式
var reader = new FileReader();
reader.onload = function(evt){
// 创建image对象
var image = new Image();
image.src = evt.target.result;
var imageWidth;
var imageHeight;
// 获取图片宽高
image.onload = function(){
console.log("宽度为：",this.width,"高度为：",this.height);
if (maxWidth != 'undefined') {
if (this.width > maxWidth) {
alert('图片宽度超限');
return false;
}
}
if (maxHeight != 'undefined') {
if (this.height > maxHeight) {
alert('图片高度超限');
return false;
}
}
img.attr('src', evt.target.result);
input.val(evt.target.result);
imgBox.show();
upBtn.hide();
}
};
reader.readAsDataURL(v);
}
})
}
</script>以上代码我已经同步到我的文档:https://www.kancloud.cn/hbh112233abc/php_note/519577
