异步提交上传图片(ajaxSubmit)

前端之家收集整理的这篇文章主要介绍了异步提交上传图片(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>

3.后台图片或者文件处理代码
/// <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;
        }
原文链接:https://www.f2er.com/ajax/163946.html

猜你在找的Ajax相关文章