aroshanzamir
سه شنبه 26 اسفند 1393, 16:46 عصر
سلام
این لینک را ببین :
http://stackoverflow.com/questions/14575787/how-to-upload-image-in-asp-net-mvc-4-using-ajax-or-any-other-technique-without-p
یک روش دیگر :
این افزونه را از سایت زیر دانلود کن :
http://www.phpletter.com/Demo/AjaxFileUpload-Demo/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
@RenderBody()
</div>
<script src="~/Scripts/jquery-1.11.1.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/ajaxfileupload.js"></script>
@RenderSection("Scripts", required: false)
</body>
</html>
مدل برنامه :
namespace MVCAjaxFormUpload.Models
{
public class Product
{
public int Id { set; get; }
public string Name { set; get; }
}
}
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(Product product)
{
var isAjax = this.Request.IsAjaxRequest();
return Json(new { result = "ok" }, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public ActionResult UploadFiles(HttpPostedFileBase image1, int id)
{
var isAjax = this.Request.IsAjaxRequest();
Thread.Sleep(3000); //شبیه سازی عملیات طولانی
return Json(new { FileName = "/Uploads/filename.ext" }, "text/html", JsonRequestBehavior.AllowGet);
}
}
}
و کد های View :
@model MVCAjaxFormUpload.Models.Product
@{
ViewBag.Title = "Index";
}
<h2>Ajax Form Upload</h2>
@using (Ajax.BeginForm(actionName: "Index",
controllerName: "Home",
ajaxOptions: new AjaxOptions { HttpMethod = "POST" },
routeValues: null,
htmlAttributes: new { id = "uploadForm" }))
{
<label>Name:</label>
@Html.TextBoxFor(model => model.Name)
<label>Image:</label>
<input type="file" name="Image1" id="Image1" />
<input type="submit" value="Submit" />
<img id="loading" src="~/Content/Images/loading.gif" style="display:none;">
}
و اسکریپت مورد نیاز :
@section Scripts
{
<script type="text/javascript">
$(function () {
$('#uploadForm').submit(function () {
$("#loading").show();
$.ajaxFileUpload({
url: "@Url.Action("UploadFiles", "Home")", // مسیری که باید فایل به آن ارسال شود
secureuri: false,
fileElementId: 'Image1', // آی دی المان ورودی فایل
dataType: 'json',
data: { id: 1, data: 'test' }, // اطلاعات اضافی در صورت نیاز
success: function (data, status) {
$("#loading").hide();
if (typeof (data.FileName) != 'undefined') {
alert(data.FileName);
}
},
error: function (data, status, e) {
$("#loading").hide();
alert(e);
}
});
});
});
</script>
}
همه چیز واضح است اگر مبهم بود بگو تا توضیح بدم
منبع : وب سایت استاد بزرگ وحید نصیری و StackoverFlow