Задать вопрос
@fryette
javascript

Почему не работает ajax и мой скрипт вместе?

@model Slika.WebUI.Models.ImagesListViewModel
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="/Content/FIleUpload.css" type="text/css">
    <meta name="viewport" content="width=device-width" />
    <script src="/Scripts/MyScript/fileUpload.js"></script>
    <script type="text/javascript" src="/Scripts/MyScript/Gallary.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('form').submit(function () {
                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) {
                        $('#images').html(result);
                    }
                });
                return false;
            });
        });
    </script>
</head>
<body>
    <div id="myForm">
        @using (Html.BeginForm("SaveImage", "Image", FormMethod.Post, new { enctype = "multipart/form-data" }))
        {
            @Html.Hidden("AlbumID", Model.AlbumID)
            @Html.Hidden("page", Model.PagingInfo.CurrentPage)
            <div class="file_upload">
                <button type="button">Выбрать</button>
                <div ng-app="myApp" ng-controller="myController">Select</div>
                <input type="file" accept="image/*" multiple="multiple" name="images">
            </div>
            <br />
        }
    </div>
    <div id="images">
        @{
            Html.RenderPartial("ImageSummary", Model);
        }
    </div>
    <div class="pager">
        @Html.PageLinks(Model.PagingInfo, x => Url.Action("List", new { page = x, Model.AlbumID }))
    </div>
</body>
</html>


И такой скрипт предназначенный для загрузки файлов 
$(function () {
    var wrapper = $(".file_upload"),
        inp = wrapper.find("input"),
        btn = wrapper.find("button"),
        lbl = wrapper.find("div");

    // Crutches for the :focus style:
    btn.focus(function () {
        wrapper.addClass("focus");
    }).blur(function () {
        wrapper.removeClass("focus");
    });

    // Yep, it works!
    btn.add(lbl).click(function () {
        inp.click();
    });

    var fileApi = (window.File && window.FileReader && window.FileList && window.Blob) ? true : false;

    inp.change(function () {

        var fileName;
        if (fileApi && inp[0].files[0])
            fileName = inp[0].files[0].name;
        else
            fileName = inp.val().replace("C:\\fakepath\\", '');
        if (!fileName.length)
            return;

        if (lbl.is(":visible")) {
            lbl.text(fileName);
            btn.text("Выбрать");
        } else
            btn.text(fileName);
    }).change();
    $('body').on('change', 'input[type=file]', function () { $('form').submit(); });
});
$(window).resize(function () {
    $(".file_upload input").triggerHandler("change");
});


Проблема в том,что в контроллер на место картинок приходит null
и страницу перезагружает ajax,если удалить код с ajax прекрасно происходит загрузка картинок.Может кто либо уже сталкивался с подобным?
  • Вопрос задан
  • 2526 просмотров
Комментировать
Подписаться 3 Оценить Комментировать
Решения вопроса 1
Mr_Smitt
@Mr_Smitt
На сколько мне известно $.ajax не умеет отправлять файлы
Попробуй вот так:
$(document).on('submit', '#user_files', function () {
    var self = this;
    var files = document.querySelector('input[type="file"]').files;
    var formData = new FormData();

    for (var i = 0, file; file = files[i]; ++i) {
      formData.append(file.name, file);
    }

    var xhr = new XMLHttpRequest();
    xhr.open('POST', $(self).attr("action"), true);
    xhr.upload.onprogress = function (e) {
      if (e.lengthComputable) {
        if (((e.loaded / e.total) * 100) >= 100) {
          alert("Загрузил!");
        }
      }
    };
    xhr.send(formData);
    return false;
  });

+ вариант с возможным прогрессбаром
$(document).on('submit', '#user_files', function () {
    var self = this;
    var files = document.querySelector('input[type="file"]').files;
    var progress = $(".progress .bar");
    var formData = new FormData();

    for (var i = 0, file; file = files[i]; ++i) {
      formData.append(file.name, file);
    }

    var xhr = new XMLHttpRequest();
    xhr.open('POST', $(self).attr("action"), true);

    xhr.upload.onprogress = function (e) {
      if (e.lengthComputable) {
        progress.css({"width": ((e.loaded / e.total) * 100) + "%"});
        if (((e.loaded / e.total) * 100) >= 100) {
          alert("Загрузил!");
        }
      }
    };

    xhr.send(formData);
    return false;
  });
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Телеграм бот для автоматизации генерации текста с ChatGPT-o1
23 дек. 2024, в 14:26
5000 руб./за проект
Elevenlabs генерация голоса
23 дек. 2024, в 14:10
10000 руб./за проект
Добработать/переработать сайт на Modx Evolution (II)
23 дек. 2024, в 14:06
1000 руб./за проект
Ещё заказы