layui js图片上传功能

<span class="spantitle">更换图片:</span>
<div class="per-imgBut layui-btn-normal layui-btn layui-btn-sm layui-btn-radius">上传图片
    <input type="file" name="filename" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="imgPreview(this)" class="per-imgInp">
</div>
<div class="per-imgDiv layui-input-inline">
    <img id="per-img" src="" alt="" />
</div>

css：

.per-imgDiv{width: 100px;height:100px;line-height: 100px;overflow: hidden;margin-top: 10px;}
.per-imgDiv img{width: 100px;max-height: 100px;}
.per-imgBut{position: relative;height: 36px;line-height: 36px;margin-left: 20px;}
.per-imgBut .per-imgInp{
    position: absolute;left: 0;
    width: 100% !important;height: 100%;margin-top: 0;
    font-size: 0;opacity: 0;cursor: pointer;
}

js：

function imgPreview(fileDom) {
	//判断是否支持FileReader
	if(window.FileReader) {
		var reader = new FileReader();
	} else {
		layer.msg('您的设备不支持图片预览功能，如需该功能请升级您的设备！', {
			skin: 'tipsRed',
			time: '1000'
		});
	}
	//获取文件
	var file = fileDom.files[0];
	var imageType = /^image\//;
	//是否是图片
	if(!imageType.test(file.type)) {
		layer.msg('请选择图片！', {
			skin: 'tipsRed',
			time: '1000'
		});
		return;
	}
	//读取完成
	reader.onload = function(e) {
		$('.per-imgDiv').html("<img id=\"per-img\" src=\"\" alt=\"\" />")
		//获取图片dom
		var img = document.getElementById("per-img");
		//图片路径设置为读取的图片
		var imgl=$('.per-imgInp').val();//查看当前图片完整路径
		var arr = imgl.split('\\');
		var fileName = arr[arr.length - 1];//获取图片纯路径
		console.log(fileName)
		img.src = e.target.result;
	};
	reader.readAsDataURL(file);
}