小编典典

MVC中的AJAX上传脚本问题

ajax

我在这里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,但至少会在其警报框中弹出错误,因此这就是我寻求其他选择的原因。现在它命中了控制器动作,文件被上传,但是它没有处理任何响应。任何帮助表示赞赏。


阅读 194

收藏
2020-07-26

共1个答案

小编典典

text/html即使您传递的是JSON,您使用的插件也应作为响应的内容类型。因此,如果您真的想使用它,则需要执行以下操作:

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对象上的属性来检查是否存在错误:

$('#uploadForm').ajaxForm(function(result) {
    if (result.errorMessage != '') {
        alert(result.errorMessage);
    } else {
        $('#RelatedFileName').val(result.fileName);
        $('#dialog').dialog('close');
    }
});
2020-07-26