Проблема с загрузочным скриптом AJAX в mvc

Question

Я нашел этот скрипт загрузки файла ajax здесь http://www.phpletter.com/Demo/AjaxFileUpload-Demo/

, который должен добавить функциональность 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, и он попадет в действие контроллера, но файл будет нулевым, но по крайней мере ошибки будут появляться в их окнах предупреждений, поэтомувот почему я искал другой вариант.Теперь он попадает в действие контроллера, и файл загружается, но он не обрабатывает никакого ответа.Любая помощь приветствуется.

Answer 1

Плагин, который вы используете, ожидает text/html в качестве типа содержимого ответа, даже если вы передаете JSON.Поэтому, если вы действительно хотите его использовать, вам нужно сделать следующее:

return Content("{ FileName: '/Uploads/' }", "text/html");

Как вы понимаете, это дерьмо.

Итак, скачайте плагин jquery form ,Это намного проще в использовании.Вам не нужно ничего делать в вашем 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');
    }
});

Answer 2

Здесь также можно установить тип контента:

return Json(new { FileName = "/Uploads/filename.ext" }, "text/html", JsonRequestBehavior.AllowGet);

Answer 3

Если вы хотите загружать AJAX, вам нужно будет создать форму загрузки внутри iframe.

См .: http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html