使用EF,MVC和JQuery上传图像

时间:2016-10-30 06:53:38

标签: jquery json asp.net-mvc entity-framework

我试图在Jquery的帮助下上传我的图片。但似乎我错过了一些东西。在我看来我是这样的: -

 $(document).ready(function () {
    $('#ImageSave').click(function () {
        var Image = $("#File").val();
        var Alt = $("#Alt").val();
        var ImgGroup = $("#ImgGroup").val();
        var Year = $("#Year").val();
        var Description = $("#Description").val();

        var ImgID = {
            "Image": Image, "Alt": Alt,
            "ImgGroup": ImgGroup, "Year": Year, "Description": Description
        };
        $.post("/Admin/ImageCreate", ImgID,
        function (data) {
            if (data == "Success") {
                alert('Image Added Successfully!!');
            }
            else if (data == "Failed") {
                alert('Image Not Added!! Please Fill all Details or Contact Support')
            }

            else {
                alert(data);
            }
        }, 'json');

    });
});

@using (Html.BeginForm(new { enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend></legend>
        <div class="editor-label">
            Image Group
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ImgGroup)
            @Html.ValidationMessageFor(model => model.ImgGroup)
        </div>
        <div class="editor-label">
            Year
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Year)
            @Html.ValidationMessageFor(model => model.Year)
        </div>
        <div class="editor-label">
            Description
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Description)
            @Html.ValidationMessageFor(model => model.Description)
        </div>
        <div class="editor-label">
            Image
        </div>
        <div>
            <input id="File" title="Upload an image" type="file" name="file" class="btn btn-info" />
            @Html.ValidationMessageFor(model => model.Image)
        </div>
        <div class="editor-label">
            Alternative Description
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Alt)
            @Html.ValidationMessageFor(model => model.Alt)
        </div>
        <p>
            <input id="ImageSave" type="button" value="Create" />
        </p>
    </fieldset>
}

在我的控制器中,我有两个GET和POST结果: -

[HttpGet]
[LogInFilter]
public PartialViewResult ImageCreate()   //Insert PartialView  
{
    return PartialView(new GarhwalBhawan.Models.ImageTbl());
}

[HttpPost]
[LogInFilter]
public JsonResult ImageCreate(GarhwalBhawan.Models.ImageTbl ImgObj, HttpPostedFileBase file) // Record Insert  
{
    if (ModelState.IsValid)
    {
        if (file != null)
        {
            file.SaveAs(HttpContext.Server.MapPath("~/Image/") + file.FileName);
            ImgObj.Image = file.FileName;
        }

        db.ImageTbls.Add(ImgObj);
        db.SaveChanges();
        myMessage = "Success";
    }

    else
    {
        myMessage = "Failed";
    }
    return Json(myMessage, JsonRequestBehavior.AllowGet);
}    

现在,当我单击“创建”按钮时。该记录以匿名路径保存为&#39; C:\ fakepath \ 22012012014.jpg&#39;并且调试器显示我在保存file.saveas时没有任何文件。我无法弄清楚错误。

1 个答案:

答案 0 :(得分:1)

您只需要提取没有上传文件路径的文件名:

var fileName = Path.GetFileName(file.FileName);
file.SaveAs(HttpContext.Server.MapPath("~/Image/") + fileName);