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>

View Code

[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;

        }

View Code

二：使用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



            width: 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>

View Code

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);

        }

View Code