我在这里http://www.phpletter.com/Demo/AjaxFileUpload- Demo/找到了这个ajax文件上传脚本
应该将ajax功能添加到我的文件上传表单中
<div id="dialog" title="Upload Image"> <% Html.BeginForm("Upload", "BugTracker", FormMethod.Post,new { id="uploadForm", enctype = "multipart/form-data"}); %> Select a file: <input type="file" name="file" id="file" /> <h6>Upload a screenshot related to the ticket</h6> <input type="submit" class="button" value="Upload" id="upload" onclick="uploadImage();" name="submit" /> <%Html.EndForm();%> </div>
我设置了一个在提交上传表单时要调用的函数,如下所示:
function uploadImage() { var action = $("#uploadForm").attr('action'); $.ajaxFileUpload({ url: action, secureuri: false, fileElementId: 'file', dataType: 'json', success: function (data, status) { $("#RelatedFileName").val() = data.FileName; $("#dialog").dialog("close"); } }); return false; }
但它跳过了成功回调函数,浏览器询问我是否要下载json文件。看一下我的上传操作:
[HttpPost] public ActionResult Upload(HttpPostedFileBase file) { Regex imageFilenameRegex = new Regex(@"(.*?)\.(jpg|jpeg|png|gif)$"); if (file != null) { if (!imageFilenameRegex.IsMatch(file.FileName)) { return JavaScript("alert('invalid file. you must upload a jpg, jpeg, png, or gif');"); } else { string filePath = Path.Combine(HttpContext.Server.MapPath("~/Uploads"), Path.GetFileName(file.FileName)); file.SaveAs(filePath); return Json(new { FileName = "/Uploads/" + file.FileName }); } } else { return JavaScript("alert('seriously? select a file to upload before hitting the upload button.');"); } }
我使用了jQuery.post,它将执行控制器操作,但文件将为null,但至少会在其警报框中弹出错误,因此这就是我寻求其他选择的原因。现在它命中了控制器动作,文件被上传,但是它没有处理任何响应。任何帮助表示赞赏。
text/html即使您传递的是JSON,您使用的插件也应作为响应的内容类型。因此,如果您真的想使用它,则需要执行以下操作:
text/html
return Content("{ FileName: '/Uploads/' }", "text/html");
如您所知,这很糟糕。
因此,继续下载jquery表单插件。它更容易使用。您无需在HTML中执行任何操作,这完全不麻烦。只需将表单保留为原样,并在javascript中简单地进行以下操作:
$(function() { // Only indicate the form id, it will take care of reading the form action, // returning false, ..., all you need is to concentrate // on the success callback $('#uploadForm').ajaxForm(function(result) { alert(result); }); });
另请注意,如果发生错误,则不应返回Javascript。您始终需要从控制器操作中返回Json。因此,如果出现错误:
return Json(new { errorMessage = "Kaboom", fileName = "" });
如果成功:
return Json(new { errorMessage = "", fileName = "/Uploads/" + file.FileName });
因此,现在您可以通过检查errorMessage返回的JSON对象上的属性来检查是否存在错误:
errorMessage
$('#uploadForm').ajaxForm(function(result) { if (result.errorMessage != '') { alert(result.errorMessage); } else { $('#RelatedFileName').val(result.fileName); $('#dialog').dialog('close'); } });