我正在使用mvc3,并试图在一个页面内创建一系列ajax表单,每个表单都上传一个文件.这是该页面的视图:
@{ ViewBag.Title = "Index"; } <h2> Index</h2> @Html.Partial("_UploadItem") @Html.Partial("_UploadItem") @Html.Partial("_UploadItem") <script type="text/javascript"> function Go() { // loop through form tags for (var n = 0; n < document.forms.length; n++) { var f = document.forms[n]; // if a dress is chosen,a caption is chosen // and a file is chosen,then submit the ajax form if (f.dressid.value != '' && f.dresscaption.value != '' && f.fileitem.value != '') f.submit(); } } </script> <input type="button" onclick="Go();"/>
然后Go()函数循环遍历ajax表单,检查每个表单上的所有3个部分(dressid,dresscaption和fileitem)是否为非空,并且调用提交表单,启动异步上载.
这是局部视图:
@using SoRefeising.Models @using (Ajax.BeginForm("UploadFile",new { },new AjaxOptions { HttpMethod = "POST" },new { enctype="multipart/form-data"})) { List<SelectListItem> items = (List<SelectListItem>)ViewBag.Dresses; <span>Dress</span> @Html.DropDownList("dressid",items,"Choose Dress"); <span>Caption</span> @Html.TextBox("dresscaption") <input type="file" id="fileitem" /> }
我用multipart属性标记了每个表单.生成页面时,我得到以下内容:
<form action="/upload/UploadFile" data-ajax="true" data-ajax-method="POST" enctype="multipart/form-data" id="form0" method="post"> <span>Dress</span> <select id="dressid" name="dressid"><option value="">Choose Dress</option> <option value="1">Simpson01</option> <option value="2">Simpson02</option> </select> <span>Caption</span> <input id="dresscaption" name="dresscaption" type="text" value="" /> <input type="file" id="fileitem" /> </form> <form action="/upload/UploadFile" data-ajax="true" data-ajax-method="POST" enctype="multipart/form-data" id="form1" method="post"> <span>Dress</span> <select id="dressid" name="dressid"><option value="">Choose Dress</option> <option value="1">Simpson01</option> <option value="2">Simpson02</option> </select> <span>Caption</span> <input id="dresscaption" name="dresscaption" type="text" value="" /> <input type="file" id="fileitem" /> </form> <form action="/upload/UploadFile" data-ajax="true" data-ajax-method="POST" enctype="multipart/form-data" id="form2" method="post"> <span>Dress</span> <select id="dressid" name="dressid"><option value="">Choose Dress</option> <option value="1">Simpson01</option> <option value="2">Simpson02</option> </select> <span>Caption</span> <input id="dresscaption" name="dresscaption" type="text" value="" /> <input type="file" id="fileitem" /> </form>
一切看起来都不错……
这是被调用的控制器动作
[HttpPost] public ActionResult UploadFile(string dressid,string dresscaption) { HttpPostedFileBase hpf = Request.Files[0] as HttpPostedFileBase; ...
调用操作时,Request.Files集合有0个项目,而不是所选文件.我启用了不显眼的javascript,不显眼的文件加载到母版页中,并在其他页面上工作.
我在论坛上看到了一些关于小心文件大小的消息.我正在测试的文件是< 2K 任何想法为什么Request.Files中没有项目? 谢谢
您无法使用AJAX上传文件.所以用普通的Html.BeginForm替换Ajax.BeginForm.您也可以查看
following blog post.
如果要使用异步上载,可以尝试一些可用的上载组件,例如Ajax Upload和Uploadify.