![](/img/trans.png)
[英]Kendo UI - Store image path in database through upload widget in grid
[英]Send image to database using Kendo Ui Upload
在我的MVC项目中,我有一个表单,该表单使用户可以使用Kendo Ui Upload上传图像。 这是我的看法:
@using Kendo.Mvc.UI
@model DevelopmentNotesProject.Models.NoteForm
@{
ViewBag.Title = "Index";
}
<script>
$(function () {
$("form").kendoValidator();
});
function limitUpload()
{
if ($("span.k-filename").html() != "" || $("span.k-filename").html() != "undefined") {
$("div.k-dropzone div.k-button.k-upload-button input").attr('disabled', 'disabled');
}
}
function enableUploadafterRemove()
{
$("div.k-dropzone div.k-button.k-upload-button input").removeAttr('disabled');
}
function onSuccess(e) {
limitUpload();
}
function onRemove(e) {
alert("innn");
enableUploadafterRemove();
}
$(document).ready(function () {
});
</script>
<style>
form,h2 {margin:0 auto;max-width:900px}
</style>
<section id="NoteForm">
<h2>New note to save</h2>
@using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary()
<fieldset>
<legend>Note to save</legend>
<ol>
<li>
@Html.LabelFor(m => m.Title)
@(Html.Kendo().TextBoxFor(m => m.Title)
.Name("Title")
.Value("")
)
@Html.ValidationMessageFor(m => m.Title)
</li>
<li>
@Html.LabelFor(m => m.Text)
@(Html.Kendo().EditorFor(m => m.Text)
.Name("Text")
)
@Html.ValidationMessageFor(m => m.Text)
</li>
<li>
@Html.LabelFor(m => m.languageId)
@(Html.Kendo().DropDownListFor(m => m.languageId)
.Name("languageId")
.DataTextField("Text")
.DataValueField("Value")
.BindTo((IEnumerable<SelectListItem>)ViewBag.languageslist)
.OptionLabel("Select a language")
)
@Html.ValidationMessageFor(m => m.languageId)
@*Html.ValidationMessageFor(m => m.Language)*@
<!--Without Kendo-->
@*Html.DropDownListFor(p => p.languageId, new SelectList(DevelopmentNotesProject.DAL.LanguageAccess.getLanguages().OrderBy(c => c.Value), "Value", "Text"), "Select country", new { @Class = "myDropDownList" })
@*Html.ValidationMessageFor(m => m.Language)*@
</li>
<li>
@Html.LabelFor(m => m.img)
@(Html.Kendo().Upload()
.Name("files")
.Async(a => a
.Save("Save", "MyNotes")
.Remove("Remove", "MyNotes")
)
.Events(events => events
.Upload("onSuccess")
.Remove("onRemove"))
)
</li>
</ol>
<input type="submit" value="Log in" />
</fieldset>
}
</section>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
现在,图像已保存在我项目的add_data文件夹中。 这段代码:
public ActionResult Save(IEnumerable<HttpPostedFileBase> files)
{
// The Name of the Upload component is "files"
if (files != null)
{
foreach (var file in files)
{
var fileName = Path.GetFileName(file.FileName);
var physicalPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);
file.SaveAs(physicalPath);
}
}
// Return an empty string to signify success
return Content("");
}
问题是我在用户提交整个表单时将所有表单数据发送到数据库:
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public ActionResult Add(NoteForm model, IEnumerable<HttpPostedFileBase> files)
{
if (ModelState.IsValid)
{
if (OAuthWebSecurity.HasLocalAccount(WebSecurity.GetUserId(User.Identity.Name)))
{
try
{
DAL.NoteAccess.insertNote(model.Title, model.Text, model.languageId);
return RedirectToAction("Index", "MyNotes");
}
catch (MembershipCreateUserException e)
{
//ModelState.AddModelError("", ErrorCodeToString(e.StatusCode));
}
}
else
{
return RedirectToAction("Login", "Account");
}
}
// If we got this far, something failed, redisplay form
return View(model);
}
我找不到在我的Noteform对象(在上面的函数中)中获取图像的解决方案。 顺便说一句,将图像发送到数据库之前先将其保存在app_data文件夹中是更好的方法吗?还是有更好的方法呢? 谢谢你的帮助
编辑:模型:
[Table("note")]
public class NoteForm
{
[Required]
[Display(Name = "Title")]
public string Title { get; set; }
[Required]
[Display(Name = "Text")]
public string Text { get; set; }
[Required]
[Display(Name = "Language")]
public int languageId { get; set; }
[ForeignKey("languageId")]
[UIHint("LangDropDown")]
public virtual Language language { get; set; }
[Display(Name = "Photo")]
public byte[] img { get; set; }
[Key]
[System.Web.Mvc.HiddenInput(DisplayValue = false)]
public int id { get; set; }
[System.Web.Mvc.HiddenInput(DisplayValue = false)]
public int userId { get; set; }
}
你有什么问题? 您有IEnumerable<HttpPostedFileBase> files
作为操作的参数。 只需从此Enumerable获取文件,然后将它们设置为具有适当属性的NoteForm。
更新您应该在上传控件中切换文件的异步发布:
.Async(a => a.Save("Save", "MyNotes")
.Remove("Remove", "MyNotes")
只需删除此代码,操作的文件参数就不会为空。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.