图片裁剪并上传，电脑手机均实用

最新推荐文章于 2024-06-25 15:33:34 发布

zhang-php

最新推荐文章于 2024-06-25 15:33:34 发布

阅读量1k

点赞数

分类专栏： ThinkPHP html5 JS

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_37682202/article/details/81945450

版权

ThinkPHP 同时被 3 个专栏收录

57 篇文章 1 订阅

订阅专栏

html5

50 篇文章 0 订阅

订阅专栏

38 篇文章 1 订阅

订阅专栏

第一步：引入相应的js，这里提供裁剪工具的js，关于我里面引用的hui的前端js您可以去hui.admin的官网下载，资源链接：https://pan.baidu.com/s/1Pt47Fqn1UVjbUC5Z2W1ESw

第二步：页面搭建，友情提示，图片加载在裁剪框里面后，可以通过鼠标滚动来改变大小，这个裁剪插件只能挪动图片位置，不能改变裁剪框位置，而且，图片过小会被放大模糊，使用时可以建议用户找大图效果更佳

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>添加银行卡</title>
    <link rel="stylesheet" type="text/css" href="__STYLE__/static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="__STYLE__/lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="__STYLE__/css/style.css" />
    <style type="text/css">
	article #addform{ height: 400px; margin: 30px auto; }
        .container{ width: 100%; }
	.container img{ cursor: pointer; border: 3px solid #fff; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,.15); }
	.modal-backdrop{ z-index: 0 !important; }		
	.ups1{ display: none; color: red; margin: -17px 0 0 150px; }
	#clipArea1{ width: 466px; height: 310px; }
	#file1,#clipBtn1{ margin: 15px 0px; }
	#view1{ display: none; width: 456px; height: 300px; 
    </style> 
</head>

<body style="width: 100%; min-width: 1024px; background-color: #f5f5f5;">
<!-- header start -->
<header>
    <!-- 头部 -->
    {include file="public/header"}  
</header>
<!-- header end -->

<!-- article-title start -->
<div class="artice-title"><span class="btn btn-primary btn-title">添加银行卡</span></div>
<!-- article-title end -->

<!-- article start -->
<article>     
    <form method="post" class="form-horizontal" id="addform">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">银行卡照片</label>
            <div class="formControls col-xs-8 col-sm-9">
                <!-- 隐藏域，用来存上传返回的图片路径 -->
                <input type="hidden" name="b_file1" id="b_file1">
		<div class="container" id="myModal1" title="点击上传" style="height:130px !important;">
	            <img src="__STYLE__/images/idcard4.jpg" class="b_file1" width="190px" alt="Avatar">
	        </div>
	   </div>
	       <div class="col-xs-8 col-sm-6 col-xs-offset-4 col-sm-offset-2"> </div>
        </div>	   
	<div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">&nbsp;</label>
	    <div class="col-xs-8 col-sm-9">
	        <a class="btn btn-primary" id="button" style="width:100%;height:40px;">立即提交</a>
	    </div>
        </div>
    </form>   
</article>

<div id="modal-demo1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    	<div class="modal-content radius">
    		<div class="modal-header">
    			<h3 class="modal-title">上传银行卡正面照&nbsp;<span class="ups1">正在读取...</span></h3>
    			<a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void();">×</a>
    		</div>
    		<div class="modal-body">
                <table width="100%">
                <tr><td><input type="file" id="file1"></td></tr>
                <tr><td><div id="clipArea1"></div></td></tr>
                <tr><td><button class="btn btn-primary" id="clipBtn1">开始上传</button></td></tr>
                <tr><td><div id="view1"></div></td></tr>
                </table>
            </div>
    	</div>
    </div>
</div>

<div style="width:100%;height:50px;margin:0 auto"></div> <!-- 空盒模型 -->

<script src="__STYLE__/lib/jquery/1.9.1/jquery.min.js"></script>
<script src="__STYLE__/static/h-ui/js/H-ui.min.js"></script>

<!-- 图片裁剪工具 -->
<script src="__STYLE__/cropper/iscroll-zoom.js"></script>
<script src="__STYLE__/cropper/hammer.js"></script>
<script src="__STYLE__/cropper/jquery.photoClip.js"></script>

<!-- 底部 -->
{include file="public/footer"} 

<script type="text/javascript">
    $(function(){
    	//模态框
	$("#myModal1").click(function(){
	    $("#modal-demo1").modal("show"); 
	});
	//证件照裁剪插件
	$("#clipArea1").photoClip({
	    width: 456,
	    height: 300,
	    file: "#file1",
	    view: "#view1",
	    ok: "#clipBtn1",
            outputType: 'png', 
	    loadStart: function(){
	        $(".ups1").css("display","block");
	        //console.log("照片读取中");
	    },
	    loadComplete: function() {
		$(".ups1").text("照片读取完成！");
		//console.log("照片读取完成");
            },
	    clipFinish: function(dataURL) {
	        //console.log(dataURL);
		//剪裁完成后返回的base64.可以直接上传至服务器。
                //计算文件大小 
		var strLen = dataURL.length;
		var fileSize = strLen-(strLen/8)*2;
		if(fileSize/1024 > 2048){
		    $(".ups1").text('请上传小于2M的图片！');
		    return false;
		}else{			
	            $(".ups1").text('正在上传……');
		}
		$.ajax({
		    type: "post",
		    data: {b_file: 1,img: dataURL},
		    url: "{:url('block/upImages')}",
		    dataType:'json',
		    success:function(data){
	                if(data.status == 1){
			    $(".ups1").text(data.info);
			    $("#b_file1").val(data.url);
			    $(".b_file1").attr('src','__PUBLIC__/upload/image/'+data.url);
			    //$("#modal-demo1").modal("hide"); 
		        }else{
			    alert(data.info);
			    return false;
			}
		     },
		     error:function(request){
	                alert('系统错误！'); 
		     }
		});
            }
	});    	
    });   
</script>
</body>
</html>

第三步：后台处理上传图片，这里的框架是tp5

public function upImages(){
        $base64 = input('img'); //接收图片
        $file = input('b_file');  //获取证件类别
        if(preg_match('/^(data:\s*image\/(\w+);base64,)/',$base64,$result)){
            $type = $result[2];
            $new_file = "./upload/image/".time().".{$type}"; //图片重命名
            $file_name = explode('./upload/image/',$new_file); //./upload/image/1532854284.jpeg ，上传后的图片以及保存路径
            if(file_put_contents($new_file,base64_decode(str_replace($result[1],'',$base64))))
            {
                if($file == 1){
                    $arr = array(
                        'status' => 1,
                        'url' => $file_name[1],
                        'info' => '图片上传成功！'
                    );
                }else{
                    unlink($new_file); //图片未写入时，删除该上传图片
                    $arr = array(
                        'status' => 0,
                        'info' => '图片上传失败，请重新上传！'
                    );  
                }
                return json($arr);                
            }
            else
            {
                $arr = array(
                    'status' => 0,
                    'info' => '图片上传失败！'
                );
                return json($arr); 
            }
        }
    }

zhang-php

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图片裁剪并上传，电脑手机均实用

第一步：引入相应的js，这里提供裁剪工具的js，关于我里面引用的hui的前端js您可以去hui.admin的官网下载，资源链接：https://pan.baidu.com/s/1Pt47Fqn1UVjbUC5Z2W1ESw第二步：页面搭建，友情提示，图片加载在裁剪框里面后，可以通过鼠标滚动来改变大小，这个裁剪插件只能挪动图片位置，不能改变裁剪框位置，而且，图片过小会被放大模糊，使用时可以建议用...
复制链接

扫一扫

专栏目录