MVC3 + Ajax 图片上传总结 Kevin

方法一：uploadify插件

1.Ajax 往后台Post 的数据有两种，一种是文本类型，一种是大数据文件图片等。而Ajax不能直接传大数据文件，只能借助插件实现该功能。

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

   <script src="http://www.cnblogs.com/Scripts/swfobject.js" type="text/javascript"></script>

    <script src="http://www.cnblogs.com/Scripts/jquery.uploadify.v2.1.0.min.js" type="text/javascript"></script>

    <link href="http://www.cnblogs.com/Content/uploadify.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        .textstyle1
        {
            color: Red;
            font-weight: bold;
        }
        .textstyle2
        {
            color: Green;
            font-weight: bold;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            //上传
            $('#fileInput1').uploadify({
                'uploader': '/Content/uploadify.swf',
                'script': '/Upload/AddPic',
                'folder': '/Upload',
                'cancelImg': '/Content/cancel.png',
                'fileExt': '*.xls',
                'fileDesc': '*.xls',
                'sizeLimit': 1024 * 1024 * 4, //4M
                'multi': false,
                'onComplete': fun
            });

        });
        function fun(event, queueID, fileObj, response, data) {
            if (response != "") {
                showInfo("成功上传" + response, true); //showInfo方法设置上传结果     
            }
            else {
                showInfo("文件上传出错！", false);
            }
        }
        //显示提示信息，textstyle2为绿色，即正确信息；textstyl1为红色，即错误信息
        function showInfo(msg, type) {
            var msgClass = type == true ? "textstyle2" : "textstyle1";
            $("#result").removeClass();
            $("#result").addClass(msgClass);
            $("#result").html(msg);
        }
        //如果点击‘导入文件’时选择文件为空，则提示
        function checkImport() {
            if ($.trim($('#fileInput1Queue').html()) == "") {
                alert('请先选择要导入的文件！');
                return false;
            }
            return true;
        } 
    </script>


<div>
    <input type="text" id="test" />
    <p><input id="fileInput1" name="fileInput1" type="file"/></p>
    <p style="margin-top:5px;font-size:14px;font-weight:bold;">
    <a href="javascript:if(checkImport()){$('#fileInput1').uploadifySettings('scriptData',{'name':$('#test').val()});$('#fileInput1').uploadifyUpload();}">导入文件</a></p>
    <p style="margin-top:5px;font-size:14px;font-weight:bold;"><span id="result"></span></p>
</div> 

　　后台代码：

namespace qdxy.Controllers
{
    public class UploadController : Controller
    {
        //
        // GET: /Upload/

        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public JsonResult AddPic2(HttpPostedFileBase context)
        {
            int s = Request.ContentLength;
            //string fileName = Path.GetFileName(upImg.FileName);
            //string filePhysicalPath = Server.MapPath("~/Upload/"+fileName);


            //string name = "", message = "";
            //byte[] bytes  = new byte[]{};
            //try
            //{
            //    upImg.SaveAs(filePhysicalPath);
            //    name = Path.GetFileName(fileName);

            //    bytes = Encoding.Unicode.GetBytes("图片添加成功");
            //    for (int i = 0; i < bytes.Length; i+=2)
            //    {
            //        message += "\\u" + bytes[i+1].ToString("x").PadLeft(2,'0')+bytes[i].ToString("x").PadRight(2,'0');
            //    }

            //}
            //catch (Exception ex)
            //{
            //    message = ex.Message;
            //}

            return Json(new
            {
                //picpath = "/Upload/" + fileName,
                //message = message
            });
        }

        [HttpPost]
        public JsonResult AddPic(HttpPostedFileBase FileData, string folder, string name)
        {
            string title = string.Empty;
            string message = string.Empty;

            //将传过来的图片映射到物理硬盘的路径上
            string storeFilePath = Server.MapPath("~/Upload/"+FileData.FileName);

            try
            {
                //保存图片的方法
                FileData.SaveAs(storeFilePath);
                title = Path.GetFileName(folder);

                byte[] bytes = Encoding.Unicode.GetBytes("图片上传成功");
                //将图片转换成Unicode编码方便传输
                /*
                 * Unicode和汉字编码小知识 将汉字进行UNICODE编码，
                 * 如：“王”编码后就成了“\u738b”，UNICODE字符以\u开始，后面有4个数字或者字母
                 * ，所有字符都是16进制的数字，每两位表示的256以内的一个数字。
                 * 而一个汉字是由两个字符组成，于是就很容易理解了，
                 * “738b”是两个字符，分别是“73”“8b”。
                 * 但是在将 UNICODE字符编码的内容转换为汉字的时候，
                 * 字符是从后面向前处理的，所以，需要把字符按照顺序“8b”“73”
                 * 进行组合得到汉字
                 * */
                for (int i = 0; i < bytes.Length; i+=2)
                {
                    message += "\\u" + bytes[i + 1].ToString("x").PadLeft(2, '0') + bytes[i].ToString("x").PadRight(2,'0');
                }

            }
            catch (Exception ex)
            {
                message = ex.Message;
            }

            return Json(new {                    
                title = title,
                message = message
            });
        }

    }
}

　　原本是想用Json来返回上传的结果的，但似乎客户端的uploadify插件的方法不支持json格式的数据，有待进一步研究。

方法二：利用 JQueryForm插件 详见：http://www.cnblogs.com/kfx2007/archive/2012/08/27/2658325.html

  这种方法是利用Form提交表单来把大数据传到后台的。