如何在不重新加载mvc3中的整个页面的情况下上传文件?

时间:2012-08-08 08:34:54

标签: asp.net-mvc-3 file-upload

过去几天我一直在与MVC合作。

我的某个页面出现问题,即我有一个q用户输入所需详细信息并上传文件的页面。我有两个按钮,分别名为Upload for Uploading File和Create,用于创建新的个人资料。

我的问题

我的问题是,当用户点击上传按钮时,我不想重新加载整个页面。我正在考虑使用webmethod进行文件上载。

我不知道我在这里做错了什么

任何人都可以纠正我

这是我的控制器中名为Create

的Webmethod

控制器

   [WebMethod]
   public string  FileUpload(HttpPostedFileBase file, BugModel model)
   {             
       BugModel bug = null;
       if (file != null && file.ContentLength > 0)
       {
           string path = "/Content/UploadedFiles/" + Path.GetFileName(file.FileName);
           string savedFileName = Path.Combine(System.Web.HttpContext.Current.Server.MapPath ("~" +path));
           file.SaveAs(savedFileName);
           BugAttachment attachment = new BugAttachment();
           attachment.FileName = "~" + path.ToString();
           bug.ListFile.Add(attachment);
           model = bug;              
       }
       return "FileUploaded";          
   }

使用脚本调用方法

的Javascript

       <script type="text/javascript">
      function UploadFile() {       
        $.ajax({
            type:"Post",
            url: "LogABug/FileUpload",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                alert("File Uploaded")
            },
            error: function () {
                ErrorMessage("Try Again");
            }
        });
    }
 </script>

任何人都可以告诉我怎么能这样做...如果这是错误的方法请纠正我正确的想法请

1 个答案:

答案 0 :(得分:0)

您正在单独上传文件。因此,您需要两个操作:

  • public string Something(BugModel model)为模型。
  • public string FileUpload(HttpPostedFileBase file)了解文件

现在,我会使用jQuery Form Plugin进行ajax提交。这是一个例子:

<script type="text/javascript">
    $(function () {
        $("#file-upload-form").submit(function () {
            $(this).ajaxSubmit({
                target: "#message",
                cache: false
            });

            return false;
        });
    });
</script>
@using(Html.BeginForm("FileUpload", "LogABug", FormMethod.Post, new { enctype = "multipart/form-data", id = "file-upload-form" })) {
    @Html.ValidationSummary(true)
    <fieldset>
        @Html.EditorFor(model => model.File)
        <input type="submit" value="Upload" />
    </fieldset>
}
<div id="message">
</div>

您从操作中返回的内容将显示在div,ID为message