异步提交上传图片（ajaxSubmit）

1.首先引入jquery和jquery.form这两个js文件

jquery-1.9.1.js和jquery-form.js

2.前台代码如下：

<!--上传图片表单（隐藏）-->
<form style="display:none" method="post" enctype="multipart/form-data" id="ImageForm" action="@Url.Action("UploadFile","Upload")">
    <input type="file" id="realImage" name="Image" />
    <input type="submit" value="上传" />
</form>

<!--上传按钮（模拟上传）-->
<a href="javascript:void(0)" id="uploadImage" style="margin-right:20px">上传图片</a>
<input type="hidden" id="imageUrl"/>
<a href="javascript:void(0)" id="viewImage">查看</a>

<!--引用jquery文件和jquery.form文件-->
<script src="~/Content/js/jquery-1.9.1.js"></script>
<script src="~/Content/js/jquery-form.js"></script>
<script type="text/javascript">
    $(function () {
        //模拟文件上传
        $("#uploadImage").on("click",function () {
            $("#realImage").click();
        })

        //文件异步上传
        $("#realImage").on("change",function () {
            //异步提交表单
            $("#ImageForm").ajaxSubmit(function (data) {
                var url = data.url;
                if (data.success) {
                    $("#imageUrl").val(url);
                    alert("上传成功");
                }
            });
        });

        //绑定查看事件
        $("#viewImage").on("click",function () {
            var url = $("#imageUrl").val();
            window.open(url);
        });
    })
</script>

/// <summary>
        /// 文件上传
        /// </summary>
        /// <param name="fileType">上传文件类型</param>
        /// <returns></returns>
        public ActionResult UploadFile(FileTypeEnum fileType = FileTypeEnum.Image)
        {
            string url = "";
            switch (fileType)
            {
                case FileTypeEnum.Image:
                    url = SaveImage();
                    break;
                case FileTypeEnum.Temp:
                    url = SaveTemp();
                    break;
                default:
                    break;
            }
            return Json(new { success = true,url = url });
        }
        /// <summary>
        /// 保存图片
        /// </summary>
        /// <returns>返回文件的相对路径</returns>
        public string SaveImage()
        {
            string url = "";
            if (Request.Files.Count > 0)
            {
                //获取文件
                HttpPostedFileBase file = Request.Files[0];
                //相对路径
                string relativeFolderPath = "/UploadFile/Images/" + DateTime.Now.ToString("yyyy-MM-dd") + "/",//文件夹的相对路径
                physicalFolderPath = Server.MapPath("~" + relativeFolderPath);//文件夹物理路径
                //判断磁盘上是否存在该物理路径，不存在则创建
                if (!Directory.Exists(physicalFolderPath))
                {
                    Directory.CreateDirectory(physicalFolderPath);
                }
                string fileName = Guid.NewGuid() + ".jpg",//文件名
                relativeFilePath = relativeFolderPath + fileName,//文件相对路径
                physicalFilePath = physicalFolderPath + fileName;//文件绝对路径
                file.SaveAs(physicalFilePath);
                url= relativeFilePath;
            }
            return url;
        }

        public string SaveTemp()
        {
            string url = "";
            if (Request.Files.Count > 0)
            {
                //获取文件
                HttpPostedFileBase file = Request.Files[0];
                //相对路径
                string relativeFolderPath = "/UploadFile/Temp/",//文件夹的相对路径
                physicalFolderPath = Server.MapPath("~" + relativeFolderPath);//文件夹物理路径
                //判断磁盘上是否存在该物理路径，不存在则创建
                if (!Directory.Exists(physicalFolderPath))
                {
                    Directory.CreateDirectory(physicalFolderPath);
                }
                string fileName = DateTime.Now.ToString("yyyyMMddHHmmssffff")+Path.GetExtension(file.FileName),//文件相对路径
                physicalFilePath = physicalFolderPath + fileName;//文件绝对路径
                file.SaveAs(physicalFilePath);
                url = relativeFilePath;
            }
            return url;
        }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!