网页上传图片 判断类型 检测大小 剪切图片 ASP.NET版本

本文转载自：http://www.youarebug.com/forum.php?mod=viewthread&tid=56&extra=page%3D1

我们在网页上传图片的时候，特别是上传图像等操作，需要限制用户上传图片的类型、大小、有时候还需要对图片进行剪切。这样的需求在我们工作中经常遇到。今天就来说说在web开发中，如何对上传的图片判断文件的类型、检查文件的大小、对图片进行可视化裁剪等操作。很少写帖子，有不足之处，请不吝赐教。先上图看看效果：

<ignore_js_op style="-ms-word-wrap: break-word;">

主要采用的技术：1、jquery.uploadify 用于图片上传 检查图片大小官网：http://www.uploadify.com/     
2、imgAreaSelect 用于选择要剪切的图片区域 官网：http://odyniec.net/projects/imgareaselect/     下载上面两个文件包待用。
步骤：
1、创建ASP.net mvc3工程 工程名为ImgUpload.
2、拷贝jquery.imgareaselect-0.9.10文件夹下面的jquery.imgareaselect.min.js文件到Scripts下面的js文件夹中。
      拷贝jquery.imgareaselect-0.9.10文件夹下面的css文件夹到Content下面。
     拷贝uploadify文件夹下面的jquery.uploadify.min.js文件到Scripts下面的js文件夹中。
     拷贝uploadify文件夹下面的uploadify.swf文件到Content下面的swf文件夹中。
     如果上面没有文件夹请自己新建。
现在的文件结构如下

<ignore_js_op style="-ms-word-wrap: break-word;"> 

3、在Script/js下创建ImgUpload.js文件，内容为：

$(function () {
    $('#fileToUpload').uploadify({
        'progressData': 'speed',
        'multi': false,
        'method': 'post',
        'queueID': 'some_file_queue',
        'fileSizeLimit': '1000k',
        'fileTypeDesc': 'Image Files',
        'fileTypeExts': '*.gif; *.jpg; *.png',
        'swf': '/Content/swf/uploadify.swf',
        'uploader': '/User/UploadImg',
        'onUploadStart': function (file) {
            $('#fileToUpload').uploadify('disable', true)
        }, 'onUploadComplete': function (file) {
            $('#fileToUpload').uploadify('disable', false)
        }, 'onUploadSuccess': function (file, data, response) {
            $('#fileToUpload').uploadify('disable', false)
            $("#PreviewImg").attr("src", "/Content/TempImg/" + data);
            $("#PreviewImg").attr("data-value", data);
        }
        // Put your options here
    });
    $('#PreviewImg').imgAreaSelect({
        handles: true,
        onSelectEnd: preview
    });
    $("#savebtn").click(function () {
        $.ajax({
            url: "/User/SaveHeaderImg?fileName=" + $("#preview_img").attr("src"),
            dataType: "text",
            success: function (json) {
                $("#tiebaSaveOkMsg").attr("style", "font-size: 110%; font-weight: bold; padding-left: 0.1em;display: block;");
                $("#savebtn_swap").attr("style", "display:none");
            }
        });
    });
});

function preview(img, selection) {
    if (!selection.width || !selection.height)
        return;
    var previewImg = $("#PreviewImg").attr("src");
    if ('/Content/Header/defaut.png' == previewImg) return;
    $.ajax({
        url: "/User/CutoutImg?fileName=" + previewImg + "&top=" + selection.y1 + "&left=" + selection.x1 + "&width=" + selection.width + "&height=" + selection.height,
        dataType: "text",
        success: function (json) {
            $("#preview_img").attr("src", "/Content/TempImg/" + json);
            $("#savebtn_swap").attr("style", "display:block;text-align:center; ");
            $("#tiebaSaveOkMsg").attr("style", "display:none");
        }
    });
}

4、创建Home控制器。添加ImgUpload方法以及视图。
ImgUpload视图的代码如下：

@{
    ViewBag.Title = "HeaderImgPage";
    Layout = null;
}
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/css/uploadify.css")">
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/css/imgareaselect-animated.css")">
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/css/imgareaselect-default.css")">
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/css/imgareaselect-deprecated.css")">
<script src="@Url.Content("~/Scripts/jquery-1.5.1.js ")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/js/ImgUpload.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/js/jquery.uploadify.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/js/jquery.imgareaselect.min.js")" type="text/javascript"></script>
<style type="text/css">
    body 
    {
        background:#fff;
    }
</style>
<div class="container-box">
    <p style="font-size: 110%; font-weight: bold; padding-left: 0.1em;">
        1、择一张图片
    </p>
    <div >
        <div style=" float:left; height:50px">
            <input type="file" id="fileToUpload"  name="fileToUpload" />
        </div>
        <div id="some_file_queue" style=" float:left;height:50px; 300px; margin-left:30px; "></div> 
    </div>
        <div style="float: left; clear:both;">
                <p style="font-size: 110%; font-weight: bold; padding-left: 0.1em;">
                        2、点击鼠标拖动相框截取图像
                </p>
                <div class="frame" style="margin: 0 0.3em;  300px; height: 300px;">
                        <img id="PreviewImg" src="/Content/defaut.png" style=" 300px; height: 300px;">
                </div>
        </div>
        <div style="float: left;">
                <p style="font-size: 110%; font-weight: bold; padding-left: 0.1em;">
                        3、预览截取的图像，点击保存。
                </p>
        <div style="text-align:center">
            <div class="frame" style="margin: 0 auto;  100px; height: 100px;">
                            <img id="preview_img" src="/Content/defaut.png" style=" 100px; height: 100px;">
                    </div>
        </div>
        <div id="savebtn_swap" style="text-align:center; display:none">
            <div style="margin: 20 auto 0 auto; 70px;">
                <input type="submit" id="savebtn" class="setting-submit-btn setting-submit-ml100" value="保存">
            </div>
        </div>
        <div class="save-ok" style="font-size: 110%;text-align:center; font-weight: bold; padding-left: 0.1em;display: none;" id="tiebaSaveOkMsg" >
                    <div style="margin: 20 auto 0 auto; 90px;">
                <p>保存成功</p>
            </div>
            </div>
        </div>
</div>

5、在Home控制器中添加UploadImg，CutoutImg，SaveHeaderImg方法，添加后代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.IO;
using System.Drawing;

namespace ImgUpload.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult ImgUpload()
        {
            return View();
        }
        /// <summary>
        /// 上传图片接口 上传头像使用
        /// </summary>
        /// <returns></returns>
        [HttpPost]

        public String UploadImg()
        {
            HttpPostedFileBase postedFile_pic = Request.Files["Filedata"];//获取上传信息对象  
            if (postedFile_pic != null && postedFile_pic.ContentLength != 0)
            {
                String PicFilePath = postedFile_pic.FileName;//获取上传的文件路径  
                String PicName = Path.GetFileNameWithoutExtension(postedFile_pic.FileName);//获取文件名
                String SavePath = Server.MapPath("/Content/TempImg/");
                String PicExtension = PicFilePath.Substring(PicFilePath.LastIndexOf('.'));//获取拓展名
                //构造随机名称
                String Photo = PicName + "_" + DateTime.Now.Ticks + PicExtension;
                postedFile_pic.SaveAs(SavePath + Photo);
                //规格化
                System.Drawing.Image image = System.Drawing.Image.FromFile(SavePath + Photo);
                //接着创建一个System.Drawing.Bitmap对象，并设置你希望的缩略图的宽度和高度。
                int srcWidth = image.Width;
                int srcHeight = image.Height;
                Bitmap bmp = new Bitmap(300, 300);
                //从Bitmap创建一个System.Drawing.Graphics对象，用来绘制高质量的缩小图。
                System.Drawing.Graphics gr = System.Drawing.Graphics.FromImage(bmp);
                //设置 System.Drawing.Graphics对象的SmoothingMode属性为HighQuality
                gr.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
                //下面这个也设成高质量
                gr.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
                //下面这个设成High
                gr.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
                //把原始图像绘制成上面所设置宽高的缩小图
                System.Drawing.Rectangle rectDestination = new System.Drawing.Rectangle(0, 0, 300, 300);
                gr.DrawImage(image, rectDestination, 0, 0, srcWidth, srcHeight, GraphicsUnit.Pixel);
                String NewPhoto = "__" + PicName + "_" + DateTime.Now.Ticks + PicExtension;
                bmp.Save(SavePath + NewPhoto);
                bmp.Dispose();
                image.Dispose();
                FileInfo fi = new FileInfo(SavePath + Photo);
                fi.Delete();
                return NewPhoto;
            }
            return "Invalid file type";
        }
        /// <summary>
        /// 裁剪图片
        /// </summary>
        /// <param name="fileName"></param>
        /// <param name="top"></param>
        /// <param name="left"></param>
        /// <param name="width"></param>
        /// <param name="height"></param>
        /// <returns></returns>
        public String CutoutImg(String fileName, int top, int left, int width, int height)
        {
            String PicExtension = fileName.Substring(fileName.LastIndexOf('.'));//获取拓展名
            String Photo = "__" + DateTime.Now.Ticks + PicExtension;
            String RootPath = Server.MapPath("/");
            String HeaderImgPath = Server.MapPath("/Content/TempImg/");
            Bitmap bmp = new Bitmap(RootPath + fileName);
            Rectangle rect = new Rectangle(left, top, width, height);
            Bitmap tempBitmap = bmp.Clone(rect, bmp.PixelFormat);
            tempBitmap.Save(HeaderImgPath + Photo);
            bmp.Dispose();
            tempBitmap.Dispose();
            return Photo;
        }
        public String SaveHeaderImg(String fileName)
        {
            String RootPath = Server.MapPath("/");
            String PicExtension = fileName.Substring(fileName.LastIndexOf('.'));
            String NewName = "__" + DateTime.Now.Ticks + PicExtension;
            String HeaderImgPath = Server.MapPath("/Content/Header/");
            FileInfo fi = new FileInfo(RootPath + fileName);
            fi.MoveTo(HeaderImgPath + NewName);
            return "";
        }
    }
}

6、运行，在浏览器中输入http://localhost:6133/Home/ImgUpload即可。
保存后的截图保存在Content/Header文件夹下面。


7、完整源码下载

http://www.youarebug.com/forum.php?mod=viewthread&tid=56&extra=page%3D1