大文件上传解决方案

    传统的HTML方式已经难已满足超大文件的上传。别说是100MB，50MB对服务器来说都是非常大的，服务不仅要专门开一个链接等待这个文件上传完毕，还要分配同等大小的内存来保存这个文件对服务器来讲压力相当的大。

    在实际网络环境中一般10MB左右的文件都需要借助于控件来实现。一方面是因为国内的网络环境不太稳定，另一方面是从服务器的负载方面考虑。

    像QQ邮箱中的超大附件上传功能，115网盘中的超大附件上传控件，华为网盘(DBank)，金山快盘他们都是使用控件来实现超大文件上传功能的。

    他们通过控件将一个大文件，比如1G划分成许多的小块，每一小块大约是128KB，然后循环上传，直到上传完。

    服务器端每接受一小块，相当于接受到一个单独的文件，会直接写入硬盘里。最后，把接受的所有文件给组合起来。

    这样做的优点就是减轻了服务端的压力，提高了服务端的负载能力，使得服务端能够处理的用户请求数多了。

jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除和断点续传，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。

jQuery框架EasyUI

    EasyUI 是一个富客户端的JS框架，封装了很多Web开发经常要用到的组件，有点类似于ExtJS。它们的差异在于EasyUI的各个组件是分离的，类似于jQuery UI；而 ExtJS 的所有组件都封装在一个 JS 文件中。

    EasyUI 与 jQuery UI 的共同点是有详细的API和demo，看它们提供的例子就能快速掌握其用法，学习曲线低；差别在于EasyUI提供的插件比较丰富。

    它比较适用于做一些系统的界面或者网站的后台。

    还有一点，它是通过 GPL 发布的，这意味着你可以用于商业目的并改进次程序。

    目前版本是 1.3 。

    下面是EasyUI官方提供的例子 http://www.jeasyui.com/demo/index.php。

jQuery图像裁切插件

    今天介绍一款jQuery 图像裁切插件。这款插件的应用很广泛，如在新浪微博或者QQ校友中，我们上传头像时，会有对图像进行裁切这个功能。

    为什么要裁切呢？主要是因为用户上传的头像图片可能会很大，每次打开有头像的页面加载会很慢，所以有必要对用户上传的图片进行裁切，在后台生成容量较小的缩略图。

    jQuery imgareaselect 是一款图像裁切专用的选区插件,它本身并没有图像裁切功能,只是生成一个类似选区的虚线框,拖动四角可以调整选区大小,可以拖动整个选区移动,高亮显示被选择的图像区域，用法有很多种。你可以到一下官方网站看演示或者下载下来，到自己的电脑上运行。

     http://odyniec.net/projects/imgareaselect/

   
      现在的难点是我们怎么在后台生成缩略图呢？

      首先我们必须把上图的各个参数都传递过去，关于各个参数的意义就不用我多说了吧，一目了然。


     下面我用PHP的程序来解释一下后台是怎么做处理的

<?php

//我们假设用户上传的头像是下面的文件路径

$image = $_SERVER ['DOCUMENT_ROOT'] . '/images/test.jpg';


$x1 = $_POST['x1'];//代表上图的x1坐标

$y1 = $_POST['y1'];//代表上图的y1坐标

$width = $_POST['width'];//代表上图的Width

$height = $_POST['height'];//代表上图的Height

//得到图片的相关信息

$img_info = getimagesize ( $image );

$image_type = $img_info ['mime'];




switch ($image_type) {

case 'image/gif' :

//从 GIF 文件或 URL 新建一图像，返回一图像标识符，代表了从给定的文件名取得的图像。

$source = imagecreatefromgif ( $image );

break;

case 'image/jpeg' :

$source = imagecreatefromjpeg ( $image );

break;

case 'image/png' :

$source = imagecreatefrompng ( $image );

break;

}

//等比缩放的基准，其中100是可以改变的，这里我们假设要保存的图像为100×100的像素

$scale = 100/$width;

//对新建的图像等比缩放

$newImageWidth = ceil ( $width * $scale );

$newImageHeight = ceil ( $height * $scale );

//新建一个真彩色图像，代表了一幅大小为 $newImageWidth 和 $newImageHeight 的黑色图像

$newImage = imagecreatetruecolor ( $newImageWidth, $newImageHeight );

//重采样拷贝部分图像并调整大小

imagecopyresampled ( $newImage, $source, 0, 0, $x1, $y1, $newImageWidth, $newImageHeight, $width, $height );

//设置保存新图片的路径

$img_path_info = pathinfo($image);

$thumbnail_path = $img_path_info['dirname'].'/'.time().'.'.$img_path_info['extension'];

switch ($image_type) {

case 'image/gif' :

//以 GIF 格式将图像输出到浏览器或文件

imagegif ( $newImage, $thumbnail_path );

break;

case 'image/jpeg' :

imagejpeg ( $newImage, $thumbnail_path, 90 );

break;

case 'image/png' :

imagepng ( $newImage, $thumbnail_path );

break;

}

?>

    这样子，在原来的目录里会再生成一幅新的图像