Как загрузить файл через jQuery?

Question

Мне интересно, как бы я сделал это с jQuery ajax.Прямо сейчас у меня есть всплывающее окно с диалоговым окном jQuery ui, и на нем есть html-файл ввода.

Теперь, когда пользователь нажимает импорт, я хочу сделать ajax-сообщение на сервер с jQuery.* Я не уверен, как передать файл в мой вид действия.

Прямо сейчас я делаю полный пост обратно, поэтому у меня есть это

<% using (Html.BeginForm("Import", "Controller", FormMethod.Post, new { enctype = "multipart/form-data" }))
{%>
    <br />
    <p><input type="file" id="file" name="file" size="23 accept="text/calendar"></p><br />
    <p><input type="submit" value="Upload file" /></p>        

<% } %> 

Тогда в моем контроллере

  public ActionResult Import(HttpPostedFileBase file)

Так что я не уверен, как пройтив HttpPostedFileBase с jQuery и как установить enctype = "multipart/form-data" в jQuery.

Edit

Хорошо, похоже, плагин формы jQuery подходит.

$('#frm_ImportCalendar').livequery(function()
{
    var options = {
        dataType: 'json',
        success: function(response)
        {
            alert(response);
        }
    };

    $(this).ajaxForm(options);
});

Мне было интересно, почему мой JSON не работает, но кто-то упомянул, что вы не можете использовать его так, как есть.Я проверяю другую ссылку, где кто-то смог использовать json.

Я не уверен, хотя, почему в Lck использовал .submit до ajax-метода отправки.

Edit

Как я могу изменить результат загрузки файла json, чтобы вернуть мой словарный массив?

        Dictionary<string, string> result = new Dictionary<string, string>();
        result.Add("Msg", "Success!!");
        result.Add("Body", calendarBody);

// how can I change this?
    return new FileUploadJsonResult { Data = new { message = string.Format("{0} uploaded successfully.", System.IO.Path.GetFileName(file.FileName)) } };

Answer 1

Используя плагин jQuery Form, вы можете выполнить асинхронную загрузку файла. Отъезд по следующей ссылке,

Плагин jQuery Form - Примеры кода - Загрузка файлов http://jquery.malsup.com/form/#file-upload

Удачи!

Answer 2

Мне удалось загрузить файл через AJAX с помощью плагина jQuery Form и пользовательского класса JsonResult, как описано здесь .

Используйте это, чтобы вернуть что-то вроде вашего словаря

return new FileUploadJsonResult { Data = new { Msg = "Success!!", Body = calendarBody } };

и для получения вашего сообщения в функции обратного вызова

success: function(result) {
  $("#ajaxUploadForm").unblock();
  $("#ajaxUploadForm").resetForm();
  alert(result.Msg);
}

Answer 3

По предложению Доминика используйте плагин jQuery Form . Форма, которую вы уже создали, должна уже работать правильно. Просто добавьте идентификатор, чтобы идентифицировать его:

<% using (Html.BeginForm("Import", "Controller", FormMethod.Post, new { id = "asyncForm", enctype = "multipart/form-data" }))

и используйте форму jQuery для публикации данных:

$(document).ready(function(){
    $('#asyncForm').submit(function(){
        $(this).ajaxSubmit({
            beforeSubmit: function(){
                //update GUI to signal upload
            }
            data: { additional = 'value' },
            dataType: 'xml',
            success: function(xml){
                //handle successful upload
            }
        });
    });
});

Обратите внимание, что возвращаемый dataType в формах, загружающих файлы , не может быть JSON. Используйте XML или HTML в качестве ответа в методе вашего контроллера.