• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号
登陆 注册
描述文字

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

关于:

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

用法:

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

原文地址

 

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
php中的匿名函数和闭包(closure)发布时间：2022-07-10
下一篇：
usr/include/php5/ext/pcre/php_pcre.h:29:18:fatalerror:pcre.h错误解决发布时间：2022-07-10
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap