jquery图片上传

总结两个图片上传的方法：

一：使用jquery.form中的ajaxSubmit来实现上传。

<script src="~/JavaScript/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/JavaScript/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //异步上传图片
        $("#btnUpload").click(function () {
            if ($.trim($("#fileUp").val()) == "") {
                alert("请选择一个图片文件，再点击上传。");
                return;
            }
            if (!isImageFileName($.trim($("#fileUp").val()))) {
                alert("请选择一个图片文件，文件类型错误。");
                return;
            }
            $('#formFile').ajaxSubmit({
                success: function (msg) {
                    if (msg.indexOf("UserFolder") != -1) {
                        var start = msg.indexOf(">");
                        if (start != -1) {
                            var end = msg.indexOf("<", start + 1);
                            if (end != -1) {
                                msg = msg.substring(start + 1, end);
                            }
                        }
                        $("#upLoadImageShow").attr('src', msg);//这里是重新设置图片的地址
                    }
                    else {
                        alert(msg);
                    }
                }
            });
        });
    });

    function isImageFileName(str) {
        var reg = /([0-9]{1,}.jpg)|([0-9]{1,}.gif)|([0-9]{1,}.png)|([0-9]{1,}.bmp)/;
        if (reg.test(str)) {
            return true;
        }
        return false;
    }
</script>

<div>
    <form id='formFile' name='formFile' method="post" action="/Home/UpLoadDemo2" target='frameFile' enctype="multipart/form-data">
        <div>
            <img alt="" src="~/Image/0.jpg" id="upLoadImageShow" width="130" height="130" />
            <input type='file' id='fileUp' name='fileUp' title="选择照片" />
            <input id="btnUpload" type="button" name="" value="上传" />
        </div>
    </form>
</div>

[HttpPost]
        public JsonResult UpLoadDemo2()
        {
            //定义错误消息
            string msg = "";
            //接受上传文件
            HttpPostedFileBase hp = Request.Files["fileUp"];
            if (hp == null)
            {
                msg = "请选择文件.";
            }
            //获取上传目录 转换为物理路径
            string uploadPath = Server.MapPath("~/UserFolder/");
            //获取文件名
            string fileName = DateTime.Now.Ticks.ToString() + System.IO.Path.GetExtension(hp.FileName);
            //获取文件大小
            long contentLength = hp.ContentLength;
            //文件不能大于1M
            if (contentLength > 1024 * 1024)
            {
                msg = "文件大小超过限制要求.";
            }
            //保存文件的物理路径
            string saveFile = uploadPath + fileName;
            try
            {
                //保存文件
                hp.SaveAs(saveFile);
                msg = "/UserFolder/" + fileName;
            }
            catch
            {
                msg = "上传失败.";
            }

            JsonResult rs = Json(msg);
            rs.ContentType = "text/html";
            return rs;
        }

二：使用jquery.uploadify实现上传。

<script src="~/JavaScript/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Content/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
<link href="~/Content/uploadify/uploadify.css" rel="stylesheet" />
<script type="text/javascript">
    $(document).ready(function () {
        $('#uploadify').uploadify({
            uploader: '/Home/upload',           // 服务器端处理地址
            swf: '/Content/uploadify/uploadify.swf',    // 上传使用的 Flash

             60,                          // 按钮的宽度
            height: 23,                         // 按钮的高度
            buttonText: "上传",                 // 按钮上的文字
            buttonCursor: 'hand',                // 按钮的鼠标图标

            fileObjName: 'Filedata',            // 上传参数名称

            // 两个配套使用
            fileTypeExts: "*.jpg;*.png",             // 扩展名
            fileTypeDesc: "请选择 jpg png 文件",     // 文件说明

            auto: true,                // 选择之后，自动开始上传
            multi: true,               // 是否支持同时上传多个文件
            queueSizeLimit: 5,          // 允许多文件上传的时候，同时上传文件的个数
            onUploadSuccess: function (file, data, response) {      //成功返回内容（data）
                $("#upImg").attr("src", "../UserFolder/" + data);
                $("#upImg").css("display", "block");
            }
        });
    });
</script>

<div>
    <h1>uploadify 3.2 文件上传的基本实现</h1>
    <p>
        使用了 12 个参数
        <ul>
            <li>uploader: 服务器端接收上传文件的地址</li>
            <li>swf：用来实现客户端支持的 Flash</li>

            <li>width：按钮的宽度</li>
            <li>height：按钮的高度</li>
            <li>buttonText: 上传按钮的文字</li>
            <li>buttonCursor：按钮的鼠标图标</li>

            <li>fileObjName：上传文件的请求参数名称</li>

            <li>fileTypeExts：上传文件过滤使用的扩展名</li>
            <li>fileTypeDesc：上传文件的类型描述</li>

            <li>auto：选择之后，是否自动开始上传</li>
            <li>multi：是否允许上传多个文件</li>
            <li>queueSizeLimit：同时选择多个文件的限额</li>
        </ul>
    </p>
    <span id="uploadify"></span>
    <img id="upImg" src="" alt="" />
</div>

public ActionResult Upload(HttpPostedFileBase Filedata)
        {
            // 如果没有上传文件
            if (Filedata == null || string.IsNullOrEmpty(Filedata.FileName) || Filedata.ContentLength == 0)
            {
                return this.HttpNotFound();
            }

            // 保存到 ~/UserFolder 文件夹中
            string filename = DateTime.Now.Ticks.ToString() + System.IO.Path.GetExtension(Filedata.FileName);
            string virtualPath = string.Format("~/UserFolder/{0}", filename);
            // 文件系统不能使用虚拟路径
            string path = Server.MapPath(virtualPath);
            Filedata.SaveAs(path);

            return Content(filename);
        }