关于:

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

用法:

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

原文地址

原创：HTML 头像截取上传 JS+PHP 整合包~的更多相关文章

  1. 第三百九十节，Django+Xadmin打造上线标准的在线教育平台—Django+cropper插件头像裁剪上传

    第三百九十节,Django+Xadmin打造上线标准的在线教育平台—Django+cropper插件头像裁剪上传 实现原理 前台用cropper插件,将用户上传头像时裁剪图片的坐标和图片,传到逻辑处理 ...

  2. 头像截图上传三种方式之一（一个简单易用的flash插件）（asp.net版本）

    flash中有版权声明,不适合商业开发.这是官网地址:http://www.hdfu.net/ 本文参考了http://blog.csdn.net/yafei450225664/article/det ...

  3. springMVC 头像裁剪上传并等比压

    第一次写头像裁剪上传,原本想着直接本地预览裁剪再上传,可是时间有限,jquery.jcrop貌似并没有对 假设是ie下图片预览效果是滤镜做的  做出对应处理,也没有时间去改;仅仅好将就一下先把图片上传 ...

  4. 百度编辑器前后端二开图片上传Js Thinkphp tp5 ueditor

    百度编辑器图片上传Jsueditor.all.min.js 下载链接 链接:https://pan.baidu.com/s/1VNgw9ELgRRHKeCQheFkQTw 提取码:fnfi 使用方法: ...

  5. 上传js,js修改html

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 5.21学习总结——android开发实现用户头像的上传

    最近在做个人头像的上传,具体是能调用摄像头和从相册进行选择.本篇文章参考的我的同学的博客,大家有兴趣可以去原作者那里去看看: Hi(.・∀・)ノ (cnblogs.com) 1.使用glide进行图片 ...

  7. 17-Java-文件上传报错(commons-fileupload包和commons-io包不支持JDK版本：UnsupportedClassVersionError: org/apache/commons/io/IOUtils : Unsupported major.minor version 52.0）

    文件上传报错(commons-fileupload包和commons-io包不支持JDK版本) 这个bug可把我弄惨了!!!我代码是想通过写个文件上传,我写的文件上传需要用到commons-fileu ...

  8. 头像截取 图片上传 js插件

    先看一下整体效果 页面html <div class="row"> <div class="tabs-container"> <u ...

  9. html5，js插件实现手机端实现头像剪切上传

    思路:先打开相册,选取图片,在剪切图片,转化为base64格式,然后上传到七牛存储,返回url,再传给后端,整个流程就是这样.用的是angular框架,图像插件用到imagecropper.js,废话 ...

随机推荐

  1. [2017BUAA软工]第一次博客作业

    一.一些疑问 看书看得比较慢,暂时只思考了以下几个问题,有些自问自答,不知道符合不符合要求…… [1] 第一章中书上提到了这样一个例子: “如果一架民用飞机上有需求,用户使用它的概率是百万分之一,你还 ...

  2. JavaScript设计模式学习之路——继承

    早在学习java的时候,就已经接触了继承,在java中因为有extends关键字,因此继承就比较简单.但是在JavaScript中,只能通过灵活的办法实现类的继承. 下面是我昨天在学习过程中,了解到的 ...

  3. 【week12】psp

    psp 项目 内容 开始时间 结束时间 被打断 净时间 12月2日 写博客 对各小组评价 11:20 12:05 0 45 写博客 final评价1 23:40 23:57 0 17 12月5日 看论 ...

  4. 设计模式PHP篇（三）————适配器模式

    简单的适配器模式: interface Adaptor { public function read(); public function write(); } class File implemen ...

  5. ubuntu通过apt-get方式搭建lnmp环境以及php扩展安装

    v 一直是在用的lnmp的集成安装包搭建lnmp环境,因为工作需要需要安装ldap扩展,在网上怎么都找不到源码安装包,只能卸载掉原来的lnmp环境,用ubuntu的php5-ldap扩展, 在安装中遇 ...

  6. 【bzoj2600】[Ioi2011]ricehub 双指针法

    题目描述 给出数轴上坐标从小到大的 $R$ 个点,坐标范围在 $1\sim L$ 之间.选出一段连续的点,满足:存在一个点,使得所有选出的点到其距离和不超过 $B$ .求最多能够选出多少点. $R\l ...

  7. Testng 运行Cannot find class in classpath

    用Testng运行多个class,结果报: org.testng.TestNGException: Cannot find class in classpath: Salesman     at or ...

  8. Contest 7

    A:搜索好难啊根本不会啊. B:原题都能写挂没救了啊.考虑求出每个数作为最小值时能向左向右扩展到的最远位置,那么这段区间里的所有数就不可能作为唯一的最小值成为最优解了,否则假设可以的话这段区间里的数都 ...

  9. 【BZOJ3244】【NOI2013】树的计数（神仙题）

    [BZOJ3244][NOI2013]树的计数(神仙题) 题面 BZOJ 这题有点假,\(bzoj\)上如果要交的话请输出\(ans-0.001,ans,ans+0.001\) 题解 数的形态和编号没 ...

  10. 【CF954I】Yet Another String Matching Problem（FFT）

    [CF954I]Yet Another String Matching Problem(FFT) 题面 给定两个字符串\(S,T\) 求\(S\)所有长度为\(|T|\)的子串与\(T\)的距离 两个 ...