javascript — отображение состояния файла с нескольких серверов на одной HTML-странице

отображение состояния файла с нескольких серверов на одной HTML-странице

Я хочу отобразить список статусов файлов на одной HTML-странице, которую мы получаем ежедневно.

Может ли кто-нибудь помочь мне понять, с помощью какого сценария мы можем сделать это простым способом. Мне интересно научиться писать код самостоятельно. Нужны предложения о том, какое программирование поможет.

простой алгоритм Если файл поступает в файл, он должен отображать полученный файл. Если файл, полученный и перемещенный в рабочий каталог, должен отображать незавершенный процесс. Если файл перемещен в архив, он должен отображаться как обработанный на html-странице.

Благодарность

Виджай

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,

§

Поэтому, в основном, мне нужно загрузить одно изображение, сохранить его в localStorage, а затем отобразить на следующей странице.

В настоящее время я загружаю HTML-файл:

{amp}lt;input type='file' id="uploadBannerImage" onchange="readURL(this);" /{amp}gt; 

Который использует эту функцию для отображения изображения на странице

 function readURL(input) { document.getElementById("bannerImg").style.display = "block"; if (input.files {amp}amp;{amp}amp; input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { document.getElementById('bannerImg').src = e.target.result; } reader.readAsDataURL(input.files[0]); } } 

Изображение отображается мгновенно на странице для просмотра пользователем. Затем их просят заполнить оставшуюся форму. Эта часть работает отлично.

Когда форма заполнена, они нажимают кнопку «Сохранить». После нажатия этой кнопки я сохраняю все входные данные формы в localStorage строк localStorage . Мне нужен способ сохранить изображение как элемент localStorage .

Кнопка сохранения также направит их на новую страницу. На этой новой странице будут отображаться данные о пользователях в виде таблицы с изображением вверху.

Очень просто, мне нужно сохранить изображение в localStorage после нажатия кнопки «Сохранить», а затем одолжить изображение на следующей странице из localStorage .

Я нашел некоторые решения, такие как эта скрипка и эта статья в moz: // a HACKS .

Хотя я до сих пор не совсем понимаю, как это работает, и мне действительно нужно только простое решение. По сути, мне просто нужно найти изображение через getElementByID после нажатия кнопки «Сохранить», а затем обработать и сохранить изображение.

Для тех, кто также нуждается в решении этой проблемы:

Во-первых, я получаю свое изображение с помощью getElementByID и сохраняю изображение как Base64. Затем я сохраняю строку Base64 в качестве значения localStorage .

 bannerImage = document.getElementById('bannerImg'); imgData = getBase64Image(bannerImage); localStorage.setItem("imgData", imgData); 

Вот функция, которая преобразует изображение в строку Base64:

 function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); var dataURL = canvas.toDataURL("image/png"); return dataURL.replace(/^data:image/(png|jpg);base64,/, ""); } 

Затем на моей следующей странице я создал изображение с пустым src примерно так:

 {amp}lt;img src="" id="tableBanner" /{amp}gt; 

И прямо при загрузке страницы я использую следующие три строки, чтобы получить строку Base64 из localStorage и применить ее к изображению с пустым src я создал:

 var dataImage = localStorage.getItem('imgData'); bannerImg = document.getElementById('tableBanner'); bannerImg.src = "data:image/png;base64,"   dataImage; 

Протестировал его в нескольких различных браузерах и версиях, и, похоже, он работает довольно хорошо.

Я написал небольшую библиотеку для сохранения изображения размером 2,2 Кбайт в LocalStorage JQueryImageCaching Использование:

 {amp}lt;img data-src="path/to/image"{amp}gt; {amp}lt;script{amp}gt; $('img').imageCaching(); {amp}lt;/script{amp}gt; 

Вы можете сериализовать изображение в URI данных. В этом посте есть учебник. Это создаст строку, которую вы можете хранить в локальном хранилище. Затем на следующей странице используйте данные URI в качестве источника изображения.

Msgstr «Обратите внимание, что сначала вам нужно полностью загрузить изображение (в противном случае заканчиваются пустыми изображениями), поэтому в некоторых случаях вам нужно будет обернуть обработку в: bannerImage.addEventListener (» load «, function () {}); — Юга 1 ноября ’17 в 13:04 «

Это очень важно. Одна из опций, которую я изучаю сегодня днем, — это использование методов обратного вызова javascript, а не addEventListeners, поскольку, похоже, это тоже не связывает правильно. Подготовка всех элементов перед загрузкой страницы БЕЗ обновления страницы имеет решающее значение.

Если кто-то может расширить это, пожалуйста, сделайте, например, использовали ли вы settimeout, wait, callback или addEventListener для получения желаемого результата. Какой и почему?

У меня возникла та же проблема, вместо хранения изображений, которые в конечном итоге переполняют локальное хранилище, вы можете просто сохранить путь к изображению. что-то вроде:

 let imagen = ev.target.getAttribute('src'); arrayImagenes.push(imagen); 

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector