简单实现ASP.NET MVC Ajax无刷新上传图片

最新推荐文章于 2021-08-05 19:05:08 发布

林深时见禄

最新推荐文章于 2021-08-05 19:05:08 发布

阅读量811

点赞数

分类专栏： ASP.NET MVC ASP.NET

本文链接：https://blog.csdn.net/xiaolu1014/article/details/99188820

版权

ASP.NET 同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

ASP.NET MVC

4 篇文章 0 订阅

订阅专栏

这里使用到了from.js,可以到官网下载或者从这里下载:http://pan.baidu.com/s/1c2JS60C。

首先在项目中引入jq和from.js

接下来在视图中创建表单

<body>
    <form id="form1">
        <input type="file" name="file" />
        <input type="button" value="提交" onclick="sub()" />
    </form>
    <img  id="img" src=""/>
</body>

然后编写上传的JQ代码

<script type="text/javascript">
    function sub()
    {
        $("#form1").ajaxSubmit({
            url: "@Url.Action("UploadFile", "UploadTest3")",
            type: "post",
            success: function (data) {
                $("#img").attr("src", data);
            },
            error: function (aa) {
                alert(aa);
            }
        });
    }
</script>

完整的视图代码如下

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.form.js"></script>
<body>
    <form id="form1">
        <input type="file" name="file" />
        <input type="button" value="提交" onclick="sub()" />
    </form>
    <img  id="img" src=""/>
</body>
<script type="text/javascript">
    function sub()
    {
        $("#form1").ajaxSubmit({
            url: "@Url.Action("UploadFile", "UploadTest3")",
            type: "post",
            success: function (data) {
                $("#img").attr("src", data);//data为控制器返回的保存路径的虚拟路径，
                //并赋值给了img的src属性，实现实时预览功能。
            },
            error: function (aa) {
                alert(aa);
            }
        });
    }
</script>

编写控制器代码

 public class UploadTest3Controller : Controller
    {
        // GET: UploadTest3
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult UploadFile(HttpPostedFileBase file)
        {
         string fileName = System.IO.Path.GetFileName(file.FileName); //获取上传的文件名
         //到这里已经在控制器中接到file文件了，后面根据实际需求对图片进修保存即可
         return Content();//可以返回保存的虚拟路径给视图，实现实时预览功能。
        }
    }

林深时见禄

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单实现ASP.NET MVC Ajax无刷新上传图片

这里使用到了from.js,可以到官网下载或者从这里下载:http://pan.baidu.com/s/1c2JS60C。首先在项目中引入jq和from.js接下来在视图中创建表单<body> <form id="form1"> <input type="file" name="file" /> <...
复制链接

扫一扫

专栏目录