-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathatom.xml
More file actions
96 lines (73 loc) · 7.67 KB
/
Copy pathatom.xml
File metadata and controls
96 lines (73 loc) · 7.67 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>TOm的Blog</title>
<subtitle>王晓宇's博客</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="http://yoursite.com/"/>
<updated>2017-09-15T08:47:26.751Z</updated>
<id>http://yoursite.com/</id>
<author>
<name>TOm</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>SpringMVC下用Jcrop预览裁剪上传头像</title>
<link href="http://yoursite.com/2017/04/10/Jcrop/"/>
<id>http://yoursite.com/2017/04/10/Jcrop/</id>
<published>2017-04-10T08:17:25.000Z</published>
<updated>2017-09-15T08:47:26.751Z</updated>
<content type="html"><![CDATA[<p>最近用了Jcrop实现了一个上传头像的功能，在这里记录一下，也希望能帮助到有需要的朋友。</p>
<a id="more"></a>
<p>对IE兼容性尚可，IE8和IE9不支持裁剪和预览，IE9以上可正常使用。</p>
<p><strong>直接上源码:<a href="https://github.com/iftom/springmvcdemo_jcrop" target="_blank" rel="external">https://github.com/iftom/springmvcdemo_jcrop</a></strong></p>
<p>下面是最终效果图:</p>
<p><img src="http://oo6kxue5a.bkt.clouddn.com/blogblog_1.png" alt="效果预览_1"><br><img src="http://oo6kxue5a.bkt.clouddn.com/blog_2.png" alt="效果预览_2"><br><img src="http://oo6kxue5a.bkt.clouddn.com/blog_3.png" alt="效果预览_3"><br><img src="http://oo6kxue5a.bkt.clouddn.com/blog_4.png" alt="效果预览_4"></p>
<p>下面是一个说明书式的介绍，按照我的步骤一步步走下去，功能就可以实现。</p>
<p>上传头像本身没有什么难点，但是加入了裁剪和预览功能，涉及的前端问题比较多，我途中也踩了许多坑，如果你想快速见到效果，消除对一件未知的事情的焦虑的话，<strong>我建议你先把源码下载下来，放到Tomcat里跑起来，看到真实的效果后，再着手开始写自己的代码。</strong></p>
<p><strong>详细的原理内容将来会更新。</strong></p>
<h1 id="第零步——开始前的准备"><a href="#第零步——开始前的准备" class="headerlink" title="第零步——开始前的准备"></a><strong>第零步——开始前的准备</strong></h1><p>在开始这个Demo之前，你必须已经具备以下条件:</p>
<ul>
<li>可以正常访问的SpringMVC或者SpringBoot项目</li>
<li>确保你的项目可以接受文件上传,具体的配置可以参考代码内的mvc-dispatcher-servlet.xml文件的末尾</li>
<li>一个上传头像的HTML原型页面，如果没有可以参考代码内的页面</li>
<li>Jcrop的使用方式可参考代码内的写法，但是还请你仔细阅读Jcrop官方的Demo和文档</li>
</ul>
<h1 id="第一步——下载Jcrop相关文件"><a href="#第一步——下载Jcrop相关文件" class="headerlink" title="第一步——下载Jcrop相关文件"></a><strong>第一步——下载Jcrop相关文件</strong></h1><p>登录<a href="jcrop.org">Jcrop官网</a>，下载最新的Jcrop版本(目前是v0.9.12)。</p>
<p>Jcrop的官网访问速度可能很慢，不过一定能够打开，加载的时候可以看看这个<a href="http://code.ciaoca.com/jquery/jcrop/demo/" target="_blank" rel="external">线上的中文版的Demo</a>。</p>
<p>下载完后，把相关的css、js文件放到你的项目内并且在页面上引入即可。</p>
<p>别忘了还有一张名为jcrop.gif的图片。</p>
<h1 id="第二步——编写前端页面"><a href="#第二步——编写前端页面" class="headerlink" title="第二步——编写前端页面"></a><strong>第二步——编写前端页面</strong></h1><p><strong>完整代码请参考personalPhoto.jsp</strong>，这里只对几个关键点说明一下。</p>
<p>1.因为各大浏览器的文件框的样式不同，所以页面上很少用到原生的<code><input type="file"/></code>来当做上传文件的按钮。而是把原生的文件框设置为透明（<em>注意不是hidden隐藏</em>），并且将其覆盖在另一个普通的button按钮上来完成样式的统一。</p>
<p>` file按钮透明的css样式:</p>
<p> #fcupload{<br> opacity:0;/<em> 透明，非IE </em>/<br> filter:alpha(opacity=0);/<em> 透明，IE</em>/<br> position: absolute;<br> top:123px;<br> width:135px;<br> font-size:29px;<br>} `</p>
<p>你可以通过top和left来调节file按钮的位置，通过font-size来设置file按钮的大小.</p>
<p>下面是两张对比图来直观的感受效果:<br><img src="http://oo6kxue5a.bkt.clouddn.com/blog_5.png" alt="效果预览_2"><br><img src="http://oo6kxue5a.bkt.clouddn.com/blog_6.png" alt="效果预览_2"></p>
<p>2.如果你需要添加多个预览图，请参考uploadUserPhoto.css文件和personalPhoto.jsp页面中的id的前缀为preview-pane的几个标签。</p>
<h1 id="第三步——编写后端代码"><a href="#第三步——编写后端代码" class="headerlink" title="第三步——编写后端代码"></a><strong>第三步——编写后端代码</strong></h1><p><strong>完整代码参考MainController.java</strong></p>
<p>1.除了对图片的大小和后缀名的验证之外，你还需要验证图片是否是一张真正的图片，而不是手动改过后缀名的一张伪造的图片。方法是通过JAVA代码获取图片的宽高，如果不能获取到，则认为这是一张非法的图片。代码参考FileUploadUtil.java。（即使是一张真正的图片，依然可以嵌入非法的代码，这里没有做更多的处理，日后更新。）</p>
<p>2.对图片的裁剪，如果你没有时间研究，直接复制ImgCut.java当做工具类使用即可。</p>
<p>3.为了方便Demo的展示，我把上传的图片的地址写入了config.properties文件内，请根据自己实际情况修改存储图片地址的方式。</p>
<h1 id="IE兼容性"><a href="#IE兼容性" class="headerlink" title="IE兼容性"></a><strong>IE兼容性</strong></h1><ul>
<li>IE8和IE9对文件上传支持不太友好，必须将<br>工具 -> Internet选项 -> 安全 -> 自定义级别 -> 找到“其他”中的“将本地文件上载至服务器时包含本地目录路径 打开，浏览器才能取到本地图片的路径。<br><br><br><br><br><br><br><br><br>如果你遇到了什么问题，欢迎联系我，微信:15233639789</li>
</ul>
]]></content>
<summary type="html">
<p>最近用了Jcrop实现了一个上传头像的功能，在这里记录一下，也希望能帮助到有需要的朋友。</p>
</summary>
<category term="Jcrop" scheme="http://yoursite.com/tags/Jcrop/"/>
<category term="预览裁剪上传头像" scheme="http://yoursite.com/tags/%E9%A2%84%E8%A7%88%E8%A3%81%E5%89%AA%E4%B8%8A%E4%BC%A0%E5%A4%B4%E5%83%8F/"/>
</entry>
<entry>
<title>欢迎来到TOm的Blog</title>
<link href="http://yoursite.com/2017/04/01/test/"/>
<id>http://yoursite.com/2017/04/01/test/</id>
<published>2017-04-01T07:25:33.858Z</published>
<updated>2017-09-15T08:50:55.470Z</updated>
<content type="html"><![CDATA[<h4 id="这是王晓宇的技术博客"><a href="#这是王晓宇的技术博客" class="headerlink" title="这是王晓宇的技术博客"></a>这是王晓宇的技术博客</h4><p>技术栈:Java,目前也只有Java</p>
]]></content>
<summary type="html">
<h4 id="这是王晓宇的技术博客"><a href="#这是王晓宇的技术博客" class="headerlink" title="这是王晓宇的技术博客"></a>这是王晓宇的技术博客</h4><p>技术栈:Java,目前也只有Java</p>
</summary>
<category term="welcom" scheme="http://yoursite.com/tags/welcom/"/>
</entry>
</feed>