ASP.NET MVC3 上传头像图片并截图

关于上传头像并且截图网上应该有很多资料，大多都是JQuery插件，用起来不是很方便

本文所介绍的方法将快速完成一个“上传头像图片并截图”，只需要修改少量的代码

 

我们先来看看完成后的效果：

下面我们在快速搭建一个头像上传的MVC3程序：

前台页面的适当位置加入下面的代码：

<input type="button" value="上传" onclick="clll()" />        <div id="content" style="width: 630px; height: 360px; padding: 10px; display: block;            border: 1px solid #ddd;">        </div>        <div id="info" style="width: 630px; height: auto; line-height: 20px; border: 1px solid #ddd;            border-top: 0px; font-size: 12px; padding: 10px;">            <p style="color: #666">                图片说明：<br />                每次上传的文件覆盖前面的文件。上传后的路径为: ~/upload/<br />                以字母b结尾的为大图（130x130 像素），以字母m结尾的为中图（55x55像素），以s结尾的为小图（35x35像素）</p>        </div>

<div id="content"></div>

Flash的在content显示，当然，这个也可以配置，我们可以在js代码中配置

在页面的适当位置加入下面的代码：

<script src="@Url.Content("~/Content/themes/avatar/tangram-custom-full-yui.js")" type="text/javascript"></script><script type="text/javascript">    var info = baidu.g("info");    var options = {        uploadURL: "@Url.Action("UploadAvatar", "Account")", tipHandle: function (tip) {            alert(tip);        }        , uploadCallBack: function () {            // 处理完毕后的操作。例如 window.location ='xxxxx/xxxxx';            alert("头像更换成功。");        }        , createOptions: {            id: "flashID", url: "@Url.Content("~/Content/themes/avatar/avatarMaker.swf")", width: "630px", height: "360px", container: "content"        }    };    var up = new baidu.flash.avatarMaker(options);    var t = function () {        var d = new Date();        return [d.getHours(), d.getMinutes(), d.getSeconds()].join(":")    };    function clll() { up.upload(); }</script>

 

uploadURL为你的上传处理函数

createOptions里面可以配置一些flash的信息。

 

在后台响应函数中添加适当的代码：

public ActionResult UploadAvatar()        {            int filecount = Request.Files.Count;//获得MIME文件流 的文件数量            Stream[] resStreamArray = new Stream[filecount];//建立文件流数组            string[] strFilePathArray = new string[filecount];//建立服务器文件地址数组            long[] iBufferSizeArray = new long[filecount];//建立文件流字节长度            for (int i = 0; i < filecount; i++)            {                resStreamArray[i] = Request.Files.Get(i).InputStream;                //这里设定保存后的名称，                strFilePathArray[i] = Server.MapPath("~/upload/" + DateTime.Now.ToString("yyMMddhhmmss") + Request.Files.Get(i).FileName.Substring(0, 1) + ".png");                if (System.IO.File.Exists(strFilePathArray[i]))//存在同名文件则删除                {                    System.IO.File.Delete(strFilePathArray[i]);                }                iBufferSizeArray[i] = Request.Files.Get(i).InputStream.Length;                FileStream fileStream = System.IO.File.Create(strFilePathArray[i]);//创建新文件                byte[] buffer = new byte[iBufferSizeArray[i]];                int iReadLength = 0;                //读取返回流                iReadLength = resStreamArray[i].Read(buffer, 0, buffer.Length);                while (iReadLength > 0)                {                    //写入文件流中                    fileStream.Write(buffer, 0, iReadLength);                    iReadLength = resStreamArray[i].Read(buffer, 0, buffer.Length);                }                fileStream.Flush();                resStreamArray[i].Close();                fileStream.Close();            }            return View();        }

 

这样我们的配置就算完成了，当然，必不可少的2个文件avatarFlash.swf 和 tangram-custom-full-yui.js 我们只需要放在特定的文件夹里面，改下上面的一些参数就好了。

当然，如果你不是用到MVC3，那么将会更简单哦。

avatarFlash.swf 和 tangram-custom-full-yui.js 在下面给出的连接下载。

 

案例源码下载地址：ASP.NET MVC3 上传头像图片并截图

连接不能点击，请点击：http://download.csdn.net/detail/risingsun001/5578393

 

希望这篇文章对您有用。