php直接上传单张图片无缝上传 html+js+php 不用提交base64代码给后端直接地址
php直接上传单张图片无缝上传 html+js+php 不用提交base64代码给后端直接地址返给前端并且预览用base64这个是我在做一个实名认证上传身份证照片优化的代码 分享出来给有需要的
html代码
<div class="form-group">
<label class="col-md-12">身份证正面</label>
<div class="col-md-6">
<input type="hidden" name="user_card" id="user_card">
<button type="button" class="btn btn-danger" id="upload"><i class="fa fa-photo"></i> 上传 </button>
<div>注意：图片不能超过1.5M</div>
</div>
<imgid="preview" src="/static/images/nopic.png">
<span id="preview_text">展示</span>
</div> js代码
layui.use('upload', function(){
var $ = layui.jquery;
var upload = layui.upload;
var uploadInst = upload.render({
elem: '#upload', // 绑定上传按钮的ID
url: '', // 替换为您的服务器上传接口的URL
// data: {gongneng:"upload"},
accept: 'images', // 允许上传的文件类型
exts: 'jpg|png|gif|jpeg', // 允许上传的文件扩展名
size: 1550, // 设置文件大小限制，单位为KB，这里设置为1.51MB
before: function(obj){
// 上传前预览图片
obj.preview(function(index, file, result){
$('#preview').attr('src', result).show(); // 设置预览图片的src属性，并显示图片
// 不将Base64编码结果设置到hidden input中
});
},
done: function(res){
// 上传完成后的回调函数，res为服务器返回的响应
if(res.code === 0){ // 根据您的服务器响应格式调整判断条件
layer.msg('上传成功');
// 假设服务器返回的文件路径在res.data.filePath中
$('#user_card').val(res.filePath); // 将文件路径存储到hidden input中
} else {
layer.msg('上传失败，请重试');
}
},
error: function(){
// 上传出错时的回调函数
layer.msg('上传出错，请检查网络或文件大小');
}
});
});php后端代码
if($a=="tupian"){
$user_card = md5($user_id).".png"; //用了MD5加密
$tmp = $_FILES["file"]['tmp_name'];
$tp = "usercard/{$user_card}";
if (move_uploaded_file($tmp, $tp)) {
// 文件保存成功
echo json_encode(array("code"=>0,"filePath"=>"$user_card","msg"=>"上传成功"));
} else {
// 文件保存失败
$msg= $_FILES['file']['error'];
echo json_encode(array("code"=>1,"filePath"=>"$user_card","msg"=>"$msg"));
}
}
页:
[1]