這裏使用到了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();//可以返回保存的虛擬路徑給視圖，實現實時預覽功能。
}
}