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

这里使用到了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();//可以返回保存的虚拟路径给视图,实现实时预览功能。
        }
    }

 

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页