Мобильная версияnuget версия - 1.0.3405.78.
Это отличное решение для управления контентом HTML в приложении WPF.
За исключением ошибки, с которой я не могу справиться. Я должен что -то пропустить. Если страница содержит файловую нагрузку, когда я загружаю несколько файлов и показываю ее на странице, случайным образом, все приложение сбоятся без какого -либо сообщества ошибки.
Код: Выделить всё
await wv2.EnsureCoreWebView2Async();
//Loads javascript content.
wv2.CoreWebView2.DOMContentLoaded += async (sender, e) =>
{
if (javascriptGenerated == false)
{
// Inject the JavaScript code
await wv2.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(GenerateJSPart());
javascriptGenerated = true;
}
};
var htmlPath = GenerateHtml();
wv2.Source = new Uri(htmlPath, UriKind.Absolute);
wv2.CoreWebView2.PermissionRequested += (sender, e) =>
{
if (e.PermissionKind == CoreWebView2PermissionKind.FileReadWrite || e.PermissionKind == CoreWebView2PermissionKind.UnknownPermission)
{
e.State = CoreWebView2PermissionState.Allow;
}
};
private string GenerateJSPart()
{
//Script to add file uploads.
string js = "document.addEventListener('DOMContentLoaded', function() { " +
"const fileInputs = document.querySelectorAll('input[type=\"file\"]'); " +
" fileInputs.forEach(input => { " +
" input.addEventListener('change', function(e) { " +
" handleFileUpload(e.target); " +
" }); " +
" });" +
"});" +
"" +
"function handleFileUpload(fileInput) { " +
" const file = fileInput.files[0]; " +
" if (!file) { " +
" return; " +
" } " +
"" +
"if (!file.type.startsWith('image/')) { " +
" alert('Please select an image file.'); " +
" fileInput.value = ''; " +
" return; " +
" } " +
"" +
"const parentDiv = fileInput.closest('div'); " +
" if (!parentDiv) { " +
"console.error('Parent div not found'); return; " +
"} " +
"" +
"const reader = new FileReader(); " +
"reader.onload = function(e) { " +
" const existingImg = parentDiv.querySelector('img'); " +
"if (existingImg) { existingImg.remove(); " +
"}" +
"const img = document.createElement('img'); " +
"img.src = e.target.result; " +
"img.style.maxWidth = '100%'; " +
"img.style.height = 'auto'; " +
" img.style.display = 'block'; " +
"img.style.margin = '10px 0'; " +
" img.style.border = '1px solid #ddd'; " +
"img.style.borderRadius = '4px'; " +
" fileInput.parentNode.insertBefore(img, fileInput.nextSibling); " +
" fileInput.style.display = 'none'; " +
" const label = parentDiv.querySelector('label'); " +
" if (label) { " +
"label.style.display = 'none'; " +
"} " +
" addRemoveButton(parentDiv, fileInput, label, img); " +
" }; " +
" reader.onerror = function() { " +
" alert('Error reading file. Please try again.'); " +
" fileInput.value = ''; " +
"}; " +
"reader.readAsDataURL(file);" +
"}" +
"function addRemoveButton(parentDiv, fileInput, label, img) { " +
"const removeBtn = document.createElement('button'); " +
" removeBtn.textContent = \"" + "Remove Image" + "\"; " +
"removeBtn.type = 'button'; " +
"removeBtn.style.cssText = 'background-color: #dc3545; " +
" color: white; " +
" border: none; " +
" padding: 5px 10px; " +
"border-radius: 4px; " +
"cursor: pointer; " +
"margin-top: 5px; " +
" font-size: 12px;'; " +
" removeBtn.onclick = function() { " +
"img.remove(); " +
" removeBtn.remove(); " +
"fileInput.style.display = 'none'; " +
"if (label) { " +
" label.style.display = 'inline-block'; " +
" } " +
" fileInput.value = ''; " +
" }; " +
" img.parentNode.insertBefore(removeBtn, img.nextSibling);" +
"}";
return js ;
}
< /code>
html part: < /p>
document.addEventListener('DOMContentLoaded', function() { const fileInputs = document.querySelectorAll('input[type="file"]'); fileInputs.forEach(input => { input.addEventListener('change', function(e) { handleFileUpload(e.target); }); });});function handleFileUpload(fileInput) { const file = fileInput.files[0]; if (!file) { return; } if (!file.type.startsWith('image/')) { alert('Please select an image file.'); fileInput.value = ''; return; } const parentDiv = fileInput.closest('div'); if (!parentDiv) { console.error('Parent div not found'); return; } const reader = new FileReader(); reader.onload = function(e) { const existingImg = parentDiv.querySelector('img'); if (existingImg) { existingImg.remove(); }const img = document.createElement('img'); img.src = e.target.result; img.style.maxWidth = '100%'; img.style.height = 'auto'; img.style.display = 'block'; img.style.margin = '10px 0'; img.style.border = '1px solid #ddd'; img.style.borderRadius = '4px'; fileInput.parentNode.insertBefore(img, fileInput.nextSibling); fileInput.style.display = 'none'; const label = parentDiv.querySelector('label'); if (label) { label.style.display = 'none'; } addRemoveButton(parentDiv, fileInput, label, img); }; reader.onerror = function() { alert('Error reading file. Please try again.'); fileInput.value = ''; }; reader.readAsDataURL(file);}function addRemoveButton(parentDiv, fileInput, label, img) { const removeBtn = document.createElement('button'); removeBtn.textContent = "Remove image"; removeBtn.type = 'button'; removeBtn.style.cssText = 'background-color: #dc3545; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; margin-top: 5px; font-size: 12px;'; removeBtn.onclick = function() { img.remove(); removeBtn.remove(); fileInput.style.display = 'none'; if (label) { label.style.display = 'inline-block'; } fileInput.value = ''; }; img.parentNode.insertBefore(removeBtn, img.nextSibling);}< /code>
.tcenter {text-align: center;margin-bottom: 10px;}span {cursor: pointer;}.custom-file-upload {border:1px solid dodgerblue;border-radius: 8px;padding:10px;padding-top:3px;padding-bottom:3px;cursor:pointer;font-size:12px;}.editing-textarea {font-family: inherit;font-size: inherit;font-weight: inherit; font-style: inherit;color: inherit;background-color: rgb(250, 250, 250);border: 1px solid dodgerblue;padding: 2px;margin: 0;resize: vertical;min-height: 20px;width: auto;min-width: 100px;display: inline-block;vertical-align: middle;}span.editable-span {cursor: pointer;transition: background-color 0.3s;}span.editable-span:hover {background -color: #f0f0f0;border -radius: 3px;}span:hover {background -color: #f0f0f0;border -radius: 3px;}.footer-div {margin-top:100px;}@media print {button {display: none !important;}.image-container {position: relative;display: inline-block; }.remove-btn:hover {background-color: #c82333 !important;}.uploaded-image {max-width: 100%; height: auto; display: block; margin: 10px 0; border: 1px solid #ddd;border -radius: 4px; box -shadow: 0 2px 4px rgba(0,0,0,0.1); }.custom-file-upload {display: none;}.footer-div {bottom:0;page-break-after: always; } .pagebreak{page-break-before: always;border:0 !important;}.content-block, p { page-break-inside: avoid; } body {}}textarea {resize:none;overflow:hidden;height:auto;min-height:50px;field-sizing:content;}textarea:focus {outline: none !important; border:1px dashed dodgerblue;box-shadow: 0 0 10px #719ECE;}.pagebreak{height:30px;margin-bottom:45px;}.pathologie-images{margin-bottom:-4px;}@media print {textarea {background-color: transparent !important;resize:none;}}CADELIO
p { margin-top: 0px;margin-bottom: 12px;line-height: 1.15; }
body { font-family: 'Verdana';font-style: Normal;font-weight: normal;font-size: 16px; }
.Normal { telerik-style-type: paragraph;telerik-style-name: Normal;border-collapse: collapse; }
.TableNormal { telerik-style-type: table;telerik-style-name: TableNormal;border-collapse: collapse; }
Select an image
есть идея?
Подробнее здесь: https://stackoverflow.com/questions/797 ... sh-the-app
