我正在尝试使用jQuery-ui对话框上传图像,并将图像文件传递给实际执行上传工作的控制器。但是,我似乎无法做到正确。代码如下:
查看:
<table>
<tr>
<th>
Image
</th>
<th>
Name
</th>
</tr>
@foreach (var item in Model.CourseApplicationForms)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.thumbnail)
</td>
<td>
@Html.DisplayFor(modelItem => item.sname)
</td>
<td>
<a href="#" class="photoupload" id="@item.enrollment_id">Upload File</a>
</td>
</tr>
}
</table>
<div id="dialog" title="Upload files">
@using(Html.BeginForm("ImageUpload","Student", FormMethod.Post, new {id="photouploadform", enctype = "multipart/form-data" }))
{
<p><input type="file" id="fileUpload" name="fileUpload" size="23"/> </p><br />
<p><input type="submit" value="Upload file" /></p>
<input type="hidden" id="EnrollId" />
}
</div>
<script type="text/javascript">
$(function () {
$('.photoupload').click(function (event) {
$('#EnrollId').val(event.target.id);
$('#dialog').dialog('open');
});
$('#photouploadform').submit(function () {
$.getJSON("/Student/ImageUpload/", {
Id: $('#EnrollId').val(), file: $('#fileUpload')
}, function (data) {
$('#dialog').append('<p>' + data + '</p>');
});
return false;
});
$("#dialog").dialog({
autoOpen: false,
show: "blind",
width: 400,
hide: "fade",
modal: true,
resizable: false
});
});
</script>
控制器
[AcceptVerbs(HttpVerbs.Get)]
JsonResult ImageUpload(int Id, HttpPostedFileBase file = null)
{
string filePath = string.Empty;
if (file.ContentLength > 0)
{
Directory.CreateDirectory(HttpContext.Server.MapPath("~/Content/Photo/medium"));
filePath = Path.Combine(HttpContext.Server.MapPath("~/Content/Photo/medium"), Path.GetFileName(file.FileName));
file.SaveAs(filePath);
}
return Json(filePath, JsonRequestBehavior.AllowGet);
}
我想传递fileupload图像但是没有线索如何做到这一点。请帮助
提前致谢