我无法在mvc中发布图片

时间:2014-06-23 04:40:48

标签: jquery html asp.net-mvc

我想创建一个将图片上传到我的目录的表单。使用ajax我想显示上面img标签上传的图像,但我不能这样做。 我的代码:

Ajax代码:

function tempupl()
{
    var file = document.getElementById("image");
    var form = new FormData();
    alert(file.files[0].name);
    form.append("image", file.files[0]);
    pather = "@Url.Action("uploadpi","countries")";
    $.ajax({
        type: "Post",
        url: pather,
        data: form,
        processData: false,
        contentType: false,
        success: function (data) {
            alert(data);
            var a = data;
            return a;
        }
    });
}

我的控制器:这是我的控制器将图像上传到文件夹。我将Json对象返回到我的ajax。

    public ActionResult uploadpi(HttpPostedFileBase image)
    {
        JsonResult j = new JsonResult();
        if (image != null && image.ContentLength > 0)
        {
            string fullpath = Path.Combine(Server.MapPath("~/Contents/"), Path.GetFileName(image.FileName));
            if (System.IO.File.Exists(fullpath))
            {
                System.IO.File.Delete(fullpath);
            }
            image.SaveAs(fullpath);
        }
        j.Data = Path.GetFileName(image.FileName)                                     
        return (j);
    }

我的表单:这是我上传图片的表单,它还有img标签来显示我上传的图片,但它不起作用。

<form method="post" enctype="multipart/form-data">

@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

<fieldset>
    <legend>pic</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.picpath)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.picpath)
        <input type="file" id="image" name="image"  /><input type="button"                               value="upload" onclick="tempupl()" />
            </div>
<img src="@Url.Content("a")" alt="" id="pic" name="pic"/>

我无法在ajax成功函数的@ url.content上插入我的文件路径。

1 个答案:

答案 0 :(得分:0)

我认为你不能仅使用Ajax和普通HTML发布图像。 如果要在不刷新整个页面的情况下上传文件,有两种方法: [1]将HTML5与ajax(http://www.sitepoint.com/html5-ajax-file-upload/)一起使用 [2]使用iframe模拟ajax上传文件(http://www.alfajango.com/blog/ajax-file-uploads-with-the-iframe-method/

我希望它可以帮到你