Javascript mvc中AJAX上传脚本的问题
我在这里找到了这个ajax文件上传脚本 它应该会在我的文件上传表单中添加ajax功能Javascript mvc中AJAX上传脚本的问题,javascript,jquery,ajax,asp.net-mvc-2,Javascript,Jquery,Ajax,Asp.net Mvc 2,我在这里找到了这个ajax文件上传脚本 它应该会在我的文件上传表单中添加ajax功能 <div id="dialog" title="Upload Image"> <% Html.BeginForm("Upload", "BugTracker", FormMethod.Post,new { id="uploadForm", enctype = "multipart/form-data"}); %>
<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>
但是它跳过了success回调函数,浏览器询问我是否要下载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,但至少会在它们的警报框中弹出错误,所以我找到了另一个选项。现在它点击控制器操作,文件被上传,但它不处理任何响应。非常感谢您的帮助。如果您想进行ajax上传,您需要在iframe中完成上传表单
请参阅:您正在使用的插件期望
text/html
作为响应内容类型,即使您正在传递JSON。因此,如果你真的想使用它,你需要这样做:
return Content("{ FileName: '/Uploads/' }", "text/html");
你知道那是废话
因此,请继续下载。它更容易使用。你不必在你的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 });
现在,您可以通过检查返回的JSON对象上的errorMessage
属性来检查是否存在错误:
$('#uploadForm').ajaxForm(function(result) {
if (result.errorMessage != '') {
alert(result.errorMessage);
} else {
$('#RelatedFileName').val(result.fileName);
$('#dialog').dialog('close');
}
});
也可以在此处设置内容类型:
return Json(new { FileName = "/Uploads/filename.ext" }, "text/html", JsonRequestBehavior.AllowGet);
我在我的项目中的其他地方使用了基于ajax的多文件上传,它在没有iFrame的情况下工作得非常好。我更愿意让这个成功回调工作,因为上传部分本身工作得很好。在没有iFrame的情况下,唯一的方法是使用flash AFAIK。我刚刚查看了脚本-这个脚本使用iFrame重建我的表单,然后进行上传。那么…关于回调有什么想法吗?我认为插件希望返回值是文本,您是否尝试过简单地以XML或文本(而不是json)的形式返回结果
return Json(new { FileName = "/Uploads/filename.ext" }, "text/html", JsonRequestBehavior.AllowGet);