原創：HTML 頭像截取上傳 JS+PHP 整合包~

時間 2019-11-30

標籤原創 html 頭像截取上傳 js+php php 整合欄目 HTML 简体版

原文原文鏈接

關於:

關於頭像上傳這個東西，網上一搜亂七八糟的一堆然而不多不多有本身中意的插件一怒之下就本身寫一個...javascript

用法:

<!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>