0

我正在开发一个 ASP.NET MVC 4 Web 应用程序。我是 Web 应用程序的初学者。我的问题是文件上传和ajax。我有两种形式。其中之一是从用户那里获取数据，例如姓名、家庭等。另一种是上传图片。我希望用户能够在提交注册之前上传图片，并在<img>标签中看到上传的图片。这是我的代码：

看法

@using (Html.BeginForm("Register", "Customer", FormMethod.Post))
{    
    <fieldset>         
        <div class="control-group">
            <label class="control-label">Name</label>
            <div class="controls">     
                @Html.TextBoxFor(model => model.Name)                
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">Family</label>
            <div class="controls">                
                @Html.TextBoxFor(model => model.Family)                
            </div>
        </div>        
        <div class="control-group">            
            <div class="controls">        
                <input type="submit" value="Submit" class="btn btn-info"/>
            </div>
        </div>        
    </fieldset>
}

<img src="" class="img"/>
@using (Html.BeginForm("UploadImage", "Customer", FormMethod.Post, new {      d="ImageUploadForm", @enctype = "multipart/form-data" }))
{            
    <input type="file" name="imgfile" class="imgfile"/>    
    <input type="submit" value="Upload" class="btnUpload btn btn-info" />                   
}

控制器中的动作

[HttpPost]
public string UploadImage(HttpPostedFileBase imgfile)
    {            
        string filePath = "";
        if (imgfile != null && imgfile.ContentLength > 0)
        {
            filePath = Path.Combine(Server.MapPath("~/Customer/"), imgfile.FileName);
            imgfile.SaveAs(filePath);                
        }
        return "~/Customer/" + imgfile.FileName;
    }

Javascript

$('#ImageUploadForm').submit(function () {
    if ($(this).valid()) {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                $('.img').attr('src', result);
            }
        })
        return false;
    }        
});

现在的问题是，当我选择一个文件并点击Upload按钮时，UploadImage()会调用该操作并上传文件，但不会调用 ajax 的成功事件，它会将我重定向到另一个页面，称为它的localhost/Customer/UplaodImage内容只是文件路径UploadImage回来。有可能做到这一点吗？或者我不能使用 ajax 发布表单数据而不重定向到另一个页面？任何帮助表示赞赏。

4

1 回答 1

4

据我所知，您不能通过常规 AJAX 发布文件。使用一些帮助库：FileUploader等...

更新：

由Adeel在这个答案中：

XHR2 支持通过 AJAX 上传文件。例如通过 FormData对象，但不幸的是，所有/旧浏览器都不支持它。

于 2013-08-09T08:13:06.917 回答