原创：HTML 头像截取上传 JS+PHP 整合包~

时间：2023-03-10 02:11:31
原创：HTML 头像截取上传 JS+PHP 整合包~

关于:

关于头像上传这个东西，网上一搜乱七八糟的一堆然而很少很少有自己中意的插件一怒之下就自己写一个...

用法:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>文件提交</title>

    <!--jcrop组件-->

    <link rel="stylesheet" href="plugins/Jcrop-0.9.12/css/jquery.Jcrop.css">

    <link rel="stylesheet" href="plugins/bootstrap-3.3.7/css/bootstrap.css">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入）

    <link rel="stylesheet" href="plugins/bootstrap-3.3.7/css/bootstrap-theme.min.css" >

-->

    <link rel="stylesheet" href="css/style.css">

</head>

<body>

<div class="container-fluid">

    <div class="row">

        <div class="col-sm-12">

            <div class="ibox-content">

                <ul class="nav nav-tabs" >

                    <li class="active" ><a href="javascript:;">本地上传</a></li>

                </ul>

                <div class="m-t m-b">

                    <input type="file" name="file" id="upinput" />

                    <div class="imag_dispaly">

                        <div id="thumb_main" ><p>上传图片预览</p></div>

                        <div id="thumb" ><p>头像预览</p></div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

</body>

<script src="../jquery/jquery-2.2.4.js"></script>

<!--用于截图的Jcrop组件-->

<script src="plugins/Jcrop-0.9.12/js/jquery.Jcrop.js"></script>

<!--bootstrap 相关效果js可不用

<script src="plugins/bootstrap-3.3.7/js/bootstrap.js"></script>

-->

<script src="js/jquery.thumb.js"></script>

<script type="text/javascript">

      //调用Thumb方法
      $.Thumb.display({

        "main":"#thumb_main",//主体预览图id

        "thumb":"#thumb",  //缩略图的id

        "input":"#upinput",//input上传表单的id

        "uploadServer":"./server.php",//图片上传服务器

        "processServer":"./server_thumb.php"//图片处理服务器

    });

</script>

</html>

具体效果:

因为自己的服务器到期了,所以暂时没有地址可与预览~见谅

下载地址:

百度网盘(压缩包里有现成的demo和源码)

github地址:

https://github.com/zhangjiahao93/jQ.thumb

原文地址