使用asp.net mvc 3中的Valums插件提交Ajax表单

时间:2012-07-18 10:17:10

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

我在asp.net mvc 3中使用了Valums上传器插件进行文件上传。以下是在表单中包含表单字段和ajax查询上传按钮的视图。我不确定我做得对不对。我必须在视图上更改,以便当我选择要上传表单字段的文件的值时也会发送。

查看:

<link href="@Url.Content("~/Content/css/fileuploader.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Content/js/fileuploader.js")" type="text/javascript"></script>


@using (Html.BeginForm("Upload","AjaxUpload")) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Upload Image File</legend>
         <div class="editor-label">
           @Html.Label("Select Language")
        </div>
        <div>

          @Html.DropDownList("Language1", (SelectList) ViewBag.lang)
      </div>
         <div class="editor-label">
           @Html.Label("Select Category")
        </div>


      <div>
          @Html.DropDownList("ParentCategoryID", ViewBag.ParentCategoryID as SelectList) 
      </div>

      <div id="file-uploader">
    <noscript>
        <p>
            Please enable JavaScript to use file uploader.</p>
    </noscript>
</div>
    </fieldset>
}


**<script type="text/javascript">
    var uploader = new qq.FileUploader
    ({
        element: document.getElementById('file-uploader'),
        action: '@Url.Action("upload")', // put here a path to your page to handle uploading
        allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'], // user this if you want to upload only pictures
        sizeLimit: 4000000, // max size, about 4MB
        minSizeLimit: 0 // min size
    });
</script>**

如何将表格的值传递给HTTPOST Action的控制器以便我可以将数据保存到数据库中。在这里,我有上传操作,将数据保存在数据库中,但我不知道要检索到通过表单发送的那些值。

HttpPost行动

  [HttpPost]
        public ActionResult Upload(HttpPostedFileBase qqfile)
        {
            var wav = new PlayWav
            {
                Name = ***filename***,
                CategoryID = ***value from category dropdown select list***,
                UserID = repository.GetUserID(HttpContext.User.Identity.Name),
                LanguageID = int.Parse(***value from language dropdown select list***),
                UploadDateTime = DateTime.Now,
                ActiveDateTime = DateTime.Now,
                FilePath = "n/a"
            };



            if (qqfile != null)
            {
                // this works for IE
                var filename = Path.Combine(Server.MapPath("~/App_Data/Uploads"), Path.GetFileName(qqfile.FileName));
                qqfile.SaveAs(filename);



                return Json(new { success = true }, "text/html");
            }
            else
            {
                // this works for Firefox, Chrome
                var filename = Request["qqfile"];
                if (!string.IsNullOrEmpty(filename))
                {
                    filename = Path.Combine(Server.MapPath("~/App_Data/Uploads"), Path.GetFileName(filename));
                    using (var output = System.IO.File.Create(filename))
                    {
                        Request.InputStream.CopyTo(output);
                    }

                    **db.PlayWavs.Attach(wav);
                    db.SaveChanges();**

                    return Json(new { success = true });
                }
            }
            return Json(new { success = false });
        }

1 个答案:

答案 0 :(得分:1)

你没看过documentation吗?有一整节题为发送其他参数。甚至给出了一个例子:

var uploader = new qq.FileUploader({
    element: document.getElementById('file-uploader'),
    action: '/server-side.upload',
    // additional data to send, name-value pairs
    params: {
        param1: 'value1',
        param2: 'value2'
    }
});