您的位置：首页 > 编程语言 > ASP

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

2019-08-11 14:28 411 查看
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/xiaolu1014/article/details/99188820

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

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

接下来在视图中创建表单

[code]<body>
<form id="form1">
<input type="file" name="file" />
<input type="button" value="提交" οnclick="sub()" />
</form>
<img  id="img" src=""/>
</body>

然后编写上传的JQ代码

[code]<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>

完整的视图代码如下

[code]<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="提交" οnclick="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>

编写控制器代码

[code] 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();//可以返回保存的虚拟路径给视图，实现实时预览功能。
}
}

 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航