ASP.NET MVC3 AJAX 上传图片示例

简介:

  最近在博问中看到一个问题,问在MVC中如何用AJAX方式上传图片,这里做了一个DEMO,详细解释一下。

  本DEMO代码非常简单,就是一个页面上有一个上传图片按钮,点击后弹出一个层,在这个弹出层里上传图片,然后把图片地址更新到页面上。在获得上传的图片地址后你可以做其他处理(如插入到文本编辑器中)。

Controller

public class ImageController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public JsonResult Upload(HttpPostedFileBase upImg)
    {
        string fileName = System.IO.Path.GetFileName(upImg.FileName);
        string filePhysicalPath = Server.MapPath("~/upload/" + fileName);
        string pic="", error="";
        try
        {
            upImg.SaveAs(filePhysicalPath);
            pic = "/upload/" + fileName;
        }
        catch (Exception ex)
        {
            error = ex.Message;
        }
        return Json(new
        {
            pic = pic,
            error = error
        });
    }
}

  提示:这里上传到网站根目录的upload文件夹中,请根据自己的需要更改或添加这个目录。

View

Index.cshtml:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section HeadCss{
    <style type="text/css">
        form{
            border:1px solid #CCC;
            border-radius:5px;
            padding:10px;
            margin:10px 0;
            width:400px;
            background:#EEE;
        }
    </style>
}
@section HeadScript{
    <script src="/Scripts/jquery.form.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn_show").bind("click", function () {
                $("#form_upload").show();
                var options = {
                    success: function (responseText, statusText, xhr, $form) {
                        var picPath = responseText.pic;
                        if (picPath == "") {
                            alert(responseText.error);
                        }
                        else {
                            $("#form_upload").hide();
                            $("#result").attr("src", picPath).show();
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.log(textStatus);
                        console.log(errorThrown);
                    }
                };

                $("#form_upload").ajaxForm(options);
            });
        });
    </script>
}
<input type="button" id="btn_show" value="上传图片" /><br />
<form id="form_upload" style="padding:20px; display:none;" action="upload" method="post" enctype="multipart/form-data">
    <input name="upImg" style="width:350px;height:25px;" size="38" type="file"/><input type="submit" value="上传"/>
</form>
<img alt="" style="display:none;" id="result" src="" />

  提示:在options的success方法中获取到上传的图片地址,你可以根据需要进行后续处理

_Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
@RenderSection("HeadCss",required:false)
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
@RenderSection("HeadScript",required:false)
</head>
<body>
@RenderBody()
</body>
</html>

引用的几个文件

Site.css跟jquery-1.4.4.min.js就不说了,用VS创建MVC项目默认就有

jquery.form.js,这是一个jquery Form 插件,地址:http://jquery.malsup.com/form/

效果

打开页面,点击“上传图片”后选择一张图片

 

上传后效果图

  PS:本文只是简单的示例,很多细节没有处理,请使用者自己根据需要完善



本文转自Artwl博客园博客,原文链接:http://www.cnblogs.com/artwl/,如需转载请自行联系原作者

相关文章
|
3月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
38 0
|
23天前
|
开发框架 前端开发 .NET
进入ASP .net mvc的世界
进入ASP .net mvc的世界
24 0
|
23天前
mvc.net分页查询案例——mvc-paper.css
mvc.net分页查询案例——mvc-paper.css
4 0
|
1月前
|
XML 开发框架 .NET
C# .NET面试系列八:ADO.NET、XML、HTTP、AJAX、WebService
## 第二部分:ADO.NET、XML、HTTP、AJAX、WebService #### 1. .NET 和 C# 有什么区别? .NET(通用语言运行时): ```c# 定义:.NET 是一个软件开发框架,提供了一个通用的运行时环境,用于在不同的编程语言中执行代码。 作用:它为多语言支持提供了一个统一的平台,允许不同的语言共享类库和其他资源。.NET 包括 Common Language Runtime (CLR)、基础类库(BCL)和其他工具。 ``` C#(C Sharp): ```c# 定义: C# 是一种由微软设计的面向对象的编程语言,专门为.NET 平台开发而创建。 作
173 2
|
1月前
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
94 5
|
2月前
|
前端开发 数据库连接 数据库
ASP.NETMVC数据库完整CRUD操作示例
ASP.NETMVC数据库完整CRUD操作示例
29 0
|
2月前
|
SQL 开发框架 .NET
ASP.NET Web——GridView完整增删改查示例(全篇幅包含sql脚本)大二结业考试必备技能
ASP.NET Web——GridView完整增删改查示例(全篇幅包含sql脚本)大二结业考试必备技能
32 0
|
3月前
|
XML 前端开发 定位技术
C#(NET Core3.1 MVC)生成站点地图(sitemap.xml)
C#(NET Core3.1 MVC)生成站点地图(sitemap.xml)
24 0
|
3月前
|
前端开发
.net core mvc获取IP地址和IP所在地(其实是百度的)
.net core mvc获取IP地址和IP所在地(其实是百度的)
121 0
|
5月前
|
开发框架 自然语言处理 前端开发
基于ASP.NET MVC开发的、开源的个人博客系统
基于ASP.NET MVC开发的、开源的个人博客系统
51 0

相关实验场景

更多