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