HTML代码
<form action="" method="post" class="form" enctype="multipart/form-data">
<ul>
<li>
<span>上传截图</span>
<div class="layui-upload" style="margin-right: 0;">
<div class="layui-upload-list" style="border-radius: initial;width: 2rem;height: auto;position:relative;">
<input type="file" name="image" style="opacity:0;filter:alpha(opacity=0);height: 2rem;position:absolute;left:0;z-index:9;">
<img class="layui-upload-img" src="" onerror="this.src='__STATIC__/all/images/img_tianjia.png'" id="demo1">
<input type="hidden" id="image_base" name="image_base">
</div>
</div>
</li>
</ul>
<div class="btnbox">
<a href="javascript:;" class="btn_org subForm">提交</a>
</div>
</form>
<script type="text/javascript">
$(function () {
//提交
var is_sub = false;
$('.subForm').click(function(){
layer.confirm('确定要提交吗?', {title: '提示'}, function () {
if(is_sub) return false;
is_sub = true;
$.ajax({
type: 'POST',
url: '/finance/remit',
data: $(".form").serialize(),
dataType: "json",
success: function (data) {
if (data.code === 1) {
layer.msg(data.msg,{time:1000},function () {
location.reload();
});
} else {
layer.msg(data.msg);
is_sub = false;
}
}
});
});
});
//上传截图
$("input[name=image]").change(function(){
var files = $(this).prop('files');
if(files[0]){ //若选择了图片
var objUrl = getObjectURL(files[0]);
if(objUrl!=''){
$("#demo1").attr("src",objUrl);
//将blob图片转换为base64图片
fetch(objUrl).then(data=>{
const blob = data.blob();
return blob;
}).then(blob=>{
let reader = new window.FileReader();
reader.onloadend = function(){
const data = reader.result;
$('#image_base').val(data);
}
reader.readAsDataURL(blob);
})
}
}else{ //若未选择图片
$("#demo1").attr("src","");
$('#image_base').val('');
}
});
//建立一个可存取到file的url
function getObjectURL(file){
var url = null;
if(window.createObjectURL!=undefined){
//基本的
url = window.createObjectURL(file);
}else if(window.URL!=undefined){
//火狐
url = window.URL.createObjectURL(file);
}else if(window.webkitURL!=undefined){
//谷歌
url = window.webkitURL.createObjectURL(file);
}
return url ;
}
}
</script>
PHP代码
<?php
//$base64_img 图片数据
$base64_img = $_POST['image_base'];
if(preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_img, $result)){
$type = $result[2]; //图片后缀
$path = ROOT_PATH.'public'.DS.'uploads'.DS.date("Ym"); //保存路径
//判断是否有该路径,没有则新建,并给予最大权限
if(!is_dir($path)){
mkdir(iconv("UTF-8", "GBK", $path), 0777, true);
}
$img_name = date('YmdHis').rand(1000,9999).'.'.$type; //图片新名称
$img_path = $path . DS . $img_name;
//保存
file_put_contents($img_path, base64_decode(str_replace($result[1], '', $base64_img)));
$img = '/uploads/'. date("Ym") . '/' . $img_name; //存入数据表中的数据
}
return json(['code' => 1, 'msg' => '提交成功']);