Как показать анимацию загрузки при отправке ввода (type = file) [duplicate]

Я пытаюсь установить div на определенную процентную высоту в CSS

blockquote>

Процент того, что?

Чтобы установить процентную высоту, ее родительский элемент (*) должен иметь явную высоту. Это довольно очевидно, поскольку если вы оставите высоту как auto, блок будет занимать высоту своего содержимого ... но если сам контент имеет высоту, выраженную в процентах от родителя, который вы сделали вы немного поймаете 22. Браузер отбрасывает и просто использует высоту содержимого.

Итак, родительский элемент div должен иметь явное свойство height. Хотя эта высота также может быть в процентах, если вы хотите, это просто переводит проблему на следующий уровень.

Если вы хотите сделать высоту div в процентах от высоты видового экрана, каждый предок div , включая и , должны иметь height: 100%, поэтому существует цепочка явных процентных высот до div.

(*: или, если div находится, «содержащий блок», который также является ближайшим предком.)

В качестве альтернативы, все современные браузеры и IE> = 9 поддерживают новые единицы CSS относительно высоты окна просмотра (vh) и ширины окна просмотра ( vw):

div {
    height:100vh; 
}

См. здесь для больше информации .

45
задан River 25 July 2017 в 20:22
поделиться

2 ответа

Если ваше представление основано на модели, и вы создали элементы управления внутри тегов <form>, вы можете сериализовать модель на FormData, используя

var formdata = new FormData($('form').get(0));

. Сюда также будут включены любые файлы сгенерированный с помощью <input type="file" name="myImage" .../>

, и отправьте его обратно с помощью

$.ajax({
  url: '@Url.Action("YourActionName", "YourControllerName")',
  type: 'POST',
  data: formdata,
  processData: false,
  contentType: false,         
});

и в вашем контроллере

[HttpPost]
public ActionResult YourActionName(YourModelType model)
{
}

или (если ваша модель не включает свойство для HttpPostedFileBase)

[HttpPost]
public ActionResult YourActionName(YourModelType model, HttpPostedFileBase myImage)
{
}

Если вы хотите добавить дополнительную информацию, которая не находится в форме, вы можете добавить ее с помощью

formdata.append('someProperty', 'SomeValue');
66
ответ дан Stephen Muecke 16 August 2018 в 05:19
поделиться
  • 1
    @StephenMuecke Большое спасибо. Это действительно одна из самых сложных проблем в отношении вызова Ajax и с помощью вас решается :) Мне интересно, возможно ли это также с Html.BeginForm и Ajax.BeginForm вместо <form>? Если да, то какие изменения должны применяться? – Clint Eastwood 20 June 2015 в 10:14
  • 2
    Да, с помощью Html.BeginForm() можно включить файлы с нормальным нормальным представлением. Извините, я немного потерялся. На какой вопрос это касалось? – Stephen Muecke 21 June 2015 в 10:15
  • 3
    @LuisGouveia, Нет, это не с Ajax.BeginForm(). В любом случае методы Ajax устарели (они даже не включены в последнюю версию MVC), а использование $.ajax() (или его производных, таких как $.get(), $.load() и т. Д., Дает вам гораздо большую гибкость. – Stephen Muecke 11 December 2015 в 11:33
  • 4
    @LuisGouveia, Да, это еще один вариант, но почему бы просто не использовать FormData в ответ? (или вам это нужно для старых браузеров, которые не поддерживают его?) – Stephen Muecke 11 December 2015 в 11:39
  • 5
    @MSH, он будет загружать несколько файлов (параметр просто должен быть IEnumerable<HttpPostedFileBase>, если у вас есть <input type="file" multiple="multiple" ... /> – Stephen Muecke 13 September 2017 в 09:04

Если вы хотите отправить данные формы с помощью Ajax.Это способ отправить

var formData = new FormData();

//File Upload
   var totalFiles = document.getElementById("Iupload").files.length;


for (var i = 0; i < totalFiles; i++) {
    var file = document.getElementById("Iupload").files[i];

    formData.append("Document", file);
}

formData.append("NameCode", $('#SelecterID').val());
formData.append("AirLineCode", $('#SelecterID').val());


$.ajax({
        url: "/Controller/ActionName",
        type: "POST",
        dataType: "JSON",
        data: formData,
        contentType: false,
        processData: false,
        success: function (result) {
    }
})
14
ответ дан Deendayal Garg 16 August 2018 в 05:19
поделиться
Другие вопросы по тегам:

Похожие вопросы: