前言

最近团队面临解散，上面感觉想把我们一刀切，当天心里就很郁闷，于是想到了换工作，哎不想换现在也不行了。。。。

当时联系到一个我认为不错的大哥，他给了我一道题，我一看，感觉有点水平，大概和HTML5有关系，但是我工作中一直想学但没机会学习，现在也只能硬着头皮做做了。

 访问地址我给关了，今早一来，磁盘空间都要挂了，图片“应有尽有”，好吧，伟大的程序员不差...

这是一道面试题

此次考察题目：

1. 用户可以选择1个或多个图片进行上传，支持拖拽文件上传和弹出文件选择窗口2种方式；

2. 用户可以看见上传的过程，清楚每个文件上传的进度；

3. 上传后，用户可以选择不同的图片进行裁剪；

4. 裁剪选择区域的时候，用户可以查看到裁剪后的效果图；

5. 测试能够通过最新版的IE/FF/CHROME

我实现的功能：

1、选择1或者多个图片上传

2、拖曳上传

3、上传状态显示/上传进度条

4、裁剪图片、预览图片、保存裁剪后的图片

基本所有功能皆以完成；

注意事项：

此次题目共花去我两天左右时间，加上平时工作时中午时间，约12小时。

而且这道题需要不只是前端方面的知识，过程中我使用了较熟悉的.net技术，作为服务器端语言，所以本地若需运行需要.net程序运行环境（安装vs2010即可），若无环境，需要给我一定时间上服务器部署以作为演示；

兼容性：

该程序中使用的很多东西都是HTML5里面的，所以兼容性只能做到最新浏览器兼容，我这里对以下浏览器做过测试：

测试过的浏览器：firefox、chrome

应该支持的浏览器：IE10

对于不支持的浏览器：

虽然功能差点，但也能进行操作（渐进增强），

不支持功能：

1、多图片上传

2、拖曳上传

3、上传状态

不足：

1、该功能要做好，个人认为需要至少1周时间，所以我暂时只能做到这个样子；

2、项目中代码未封装、未优化，若有必要，后面点我会封装优化一下； 

题目评价

不知道各位大哥是怎么看的，但是就我这水平的小鱼一看，认为该题确实有点水平，就我的知识面来看，在html5出现之前，这就是一坨铁，我所想到的就只有flash可以做。。。

不然就是后端程序相当恶心的配合，最后会得到四个字“费力不讨好”（我知道是5字了。。）

但就该题而言能做起、并且能做好，没有一定水准还真不行。。。。有点自夸的嫌疑了（别喷我承认我查了资料好不）。。。

功能截图

程序主要代码

View Code

感悟

写之前，本来感觉好多话要说，但是最后发现自己就一个标题党。。。

感悟这个东西你说之前感觉很多很多，但真的要写的时候却发现什么也没有了。

由此我想到了另外一件事情，曾经很多很要好的兄弟，平时非常思念，但真的拿起电话、见面时反而没什么话可说。。。。

哎，其实我想说在这段时间的业余时间中，总在看书学习，却没有动力，没有效果，很搞笑的是这次面试题却带给了我不一样的感觉；

我真的就以此接触了一直想学习而没有学习的HTML5的东西，我突然可以两天晚上开开心心的编码，甚至晚上睡觉时候也会思考，

我仿佛回到了大学和同学一起做项目的时光，没有多余的想法，就是想学东西，就是想做好而已。。。。

就在这个过程中，我觉得我找到了我丢失已久的“安静”，因为我心不静已经很久了，为了工资为了提升，却忘了刚刚出校门所思所想了。。。

调用曾经高手们的一句话：

如果能够只为挥剑而挥剑，或许就能更接近我所追求的境界，但又谈何容易呢？

本文转自叶小钗博客园博客，原文链接：http://www.cnblogs.com/yexiaochai/archive/2013/04/11/3014404.html，如需转载请自行联系原作者