php直接上传单张图片无缝上传 html+js+php 不用提交base64代码给后端直接地址

飞凤互联

php直接上传单张图片无缝上传 html+js+php 不用提交base64代码给后端直接地址返给前端并且预览用base64

这个是我在做一个实名认证上传身份证照片优化的代码 分享出来给有需要的
html代码

1. <div class="form-group">
   
2.                                         <label class="col-md-12">身份证正面</label>
   
3.                                         <div class="col-md-6">
   
4.                                                 <input type="hidden" name="user_card" id="user_card">
   
5.                                             <button type="button" class="btn btn-danger" id="upload"><i class="fa fa-photo"></i> 上传 </button>
   
6.                                             <div>注意：图片不能超过1.5M</div>
   
7.                                                                                 </div>
   
8.                                                                                 <img  id="preview" src="/static/images/nopic.png">
   
9.                                                                                 <span id="preview_text">展示</span>
   
10.                                     </div>

复制代码

js代码

1. layui.use('upload', function(){
   
2.     var $ = layui.jquery;
   
3.     var upload = layui.upload;
   
4.    
   
5.     var uploadInst = upload.render({
   
6.         elem: '#upload', // 绑定上传按钮的ID
   
7.         url: '', // 替换为您的服务器上传接口的URL
   
8.        // data: {gongneng:"upload"},
   
9.         accept: 'images', // 允许上传的文件类型
   
10.         exts: 'jpg|png|gif|jpeg', // 允许上传的文件扩展名
    
11.         size: 1550, // 设置文件大小限制，单位为KB，这里设置为1.51MB
    
12.         before: function(obj){
    
13.             // 上传前预览图片
    
14.             obj.preview(function(index, file, result){
    
15.                 $('#preview').attr('src', result).show(); // 设置预览图片的src属性，并显示图片
    
16.                 // 不将Base64编码结果设置到hidden input中
    
17.             });
    
18.         },
    
19.         done: function(res){
    
20.             // 上传完成后的回调函数，res为服务器返回的响应
    
21.             if(res.code === 0){ // 根据您的服务器响应格式调整判断条件
    
22.                 layer.msg('上传成功');
    
23.                 // 假设服务器返回的文件路径在res.data.filePath中
    
24.                 $('#user_card').val(res.filePath); // 将文件路径存储到hidden input中
    
25.             } else {
    
26.                 layer.msg('上传失败，请重试');
    
27.             }
    
28.         },
    
29.         error: function(){
    
30.             // 上传出错时的回调函数
    
31.             layer.msg('上传出错，请检查网络或文件大小');
    
32.         }
    
33.     });
    
34. });

复制代码

php后端代码

1. if($a=="tupian"){
   
2.     $user_card = md5($user_id).".png"; //用了MD5加密
   
3.     $tmp = $_FILES["file"]['tmp_name'];
   
4.     $tp = "usercard/{$user_card}";
   
5.     if (move_uploaded_file($tmp, $tp)) {
   
6.         // 文件保存成功
   
7.         echo json_encode(array("code"=>0,"filePath"=>"$user_card","msg"=>"上传成功"));
   
8.     } else {
   
9.         // 文件保存失败
   
10.         $msg= $_FILES['file']['error'];
    
11.         echo json_encode(array("code"=>1,"filePath"=>"$user_card","msg"=>"$msg"));
    
12.     }
    
13. }

复制代码