MVC——无刷新上传图片

最新推荐文章于 2019-08-18 15:50:38 发布

lxtql

最新推荐文章于 2019-08-18 15:50:38 发布

阅读量427

点赞数

分类专栏： mvc 文章标签： mvc 上传图片

本文链接：https://blog.csdn.net/u014742815/article/details/52700151

版权

mvc 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jquery.form.js 无刷新上传

控制器

using System;
using System.Collections;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Gzh.MvcWeb.Controllers
{
    public class UploadController : Controller
    {
        // GET: Upload
        public ActionResult Index()
        {
            return View();
        }

        /// <summary>
        /// 处理单张图片上传
        /// </summary>
        /// <param name="upImg"></param>
        /// <returns></returns>
        [HttpPost]
        public JsonResult UploadImage(HttpPostedFileBase upImg)
        {
            string pic = "", error = "";
            try
            {
                if (upImg != null)
                {
                    string fileName = System.IO.Path.GetFileName(upImg.FileName); //获取上传的文件名
                    string fileExt = Path.GetExtension(fileName);//获取扩展名

                    if (Exist(fileExt))
                    {
                        string virtualPath;
                        string filePath;
                        PerSave(fileName, out virtualPath, out filePath);
                        upImg.SaveAs(filePath);
                        pic = virtualPath;
                    }
                    else
                    {
                        error = "格式不正确";
                    }
                }
                else
                {
                    error = "请选择图片";
                }
            }
            catch (Exception e)
            {
                 //log
                error = "程序出错";
            }

            return Json(new
            {
                pic = pic,
                error = error
            });
        }

        /// <summary>
        /// 预上传，生产文件保存的真实路径和虚拟路径
        /// </summary>
        /// <param name="fileName"></param>
        /// <param name="virtualPath"></param>
        /// <param name="filePath"></param>
        private void PerSave(string fileName, out string virtualPath, out string filePath)
        {
            string datafolder = "/upload/" + DateTime.Now.Year.ToString() + ("0" + DateTime.Now.Month.ToString()).Substring(("0" + DateTime.Now.Month.ToString()).Length - 2, 2) + "/"; //文件夹
            string newFileName = DateTime.Now.Ticks.ToString() + "_" + fileName;  //新的文件名
            virtualPath = datafolder + newFileName; //虚拟路径
            filePath = Server.MapPath(virtualPath); //文件保存的地址

            if (!Directory.Exists(Path.GetDirectoryName(filePath)))
            {
                Directory.CreateDirectory(Path.GetDirectoryName(filePath));
            }
        }


        /// <summary>
        /// 判断后缀
        /// </summary>
        /// <param name="ext"></param>
        /// <returns></returns>
        private bool Exist(string ext)
        {
            bool b = false;
            ArrayList list = new ArrayList() { ".jpeg", ".jpg", ".png", ".gif" };
            if (list.Contains(ext))
            {
                b = true;
            }

            return b;

        }

    }
}

前端代码

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>mvc 无刷新 上传图片</title>
    <style type="text/css">
        form {
            border: 1px solid #CCC;
            border-radius: 5px;
            padding: 10px;
            margin: 10px 0;
            width: 400px;
            background: #EEE;
        }
    </style>
</head>
<body>
    <h1>mvc 无刷新 上传单张图片</h1>
    <form id="form_upload" action="/Upload/UploadImage" method="post" enctype="multipart/form-data">
        <input name="upImg" type="file" /><input type="submit" value="上传" />
    </form>
    <img alt="" style="display:none;" id="result" src="" />

</body>
</html>


<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<script src="~/Scripts/jquery.form.js"></script>
<script type="text/javascript">
    $(function () {
        var options = {
            success: function (responseText, statusText, xhr, $form) {
                var picPath = responseText.pic;
                if (picPath == "") {
                    alert(responseText.error);
                }
                else {
                    $("#result").attr("src", picPath).show();
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(textStatus);
                console.log(errorThrown);
            }
        };

        $("#form_upload").ajaxForm(options);
    });
</script>

效果（上传时候页面并不会刷新）

这里写图片描述

lxtql

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
MVC——无刷新上传图片

jquery.form.js 无刷新上传控制器using System;using System.Collections;using System.Collections.Generic;using System.IO;using System.Linq;using System.Web;using System.Web.Mvc;namespace Gzh.MvcWeb.Control
复制链接

扫一扫