daohualiuxiang
/
AspNetCore.Docs
mirror of https://github.com/dotnet/AspNetCore.Docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update cross-link/content for image preview (#28434)

pull/28435/head
Luke Latham 2023-02-17 05:17:00 -05:00 committed by GitHub
parent aae31c5afc
commit 993d573bdd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 2 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
aspnetcore/blazor/file-uploads.md
View File

@ -779,7 +779,7 @@ Finally, use an injected <xref:Microsoft.JSInterop.IJSRuntime> to add the `OnCha
The preceding example is for uploading a single image. The approach can be expanded to support `multiple` images.
The following `FileUpload4` component shows the full working example.
The following `FileUpload4` component shows the complete example.
`Pages/FileUpload4.razor`:

94
aspnetcore/blazor/forms-and-input-components.md
View File

@ -258,12 +258,6 @@ The components in the table are also supported outside of a form in Razor compon
For more information on the <xref:Microsoft.AspNetCore.Components.Forms.InputFile> component, see <xref:blazor/file-uploads>.
<!--
* <xref:blazor/file-uploads>
* [Preview an image provided by the `InputFile` component](#preview-an-image-provided-by-the-inputfile-component) (this article)
-->
:::moniker-end
:::moniker range="< aspnetcore-5.0"
@ -293,14 +287,7 @@ Some components include useful parsing logic. For example, <xref:Microsoft.AspNe
:::moniker range=">= aspnetcore-5.0"
The <xref:Microsoft.AspNetCore.Components.Forms.InputFile> component is a bit more complex and is detailed in <xref:blazor/file-uploads>.
<!--
* <xref:blazor/file-uploads>
* [Preview an image provided by the `InputFile` component](#preview-an-image-provided-by-the-inputfile-component) (this article)
-->
For more information on the <xref:Microsoft.AspNetCore.Components.Forms.InputFile> component, see <xref:blazor/file-uploads>.
:::moniker-end
@ -415,85 +402,6 @@ In the following example:
> [!NOTE]
> Changing the <xref:Microsoft.AspNetCore.Components.Forms.EditContext> after it's assigned is **not** supported.
<!--
## Preview an image provided by the `InputFile` component
VERSION THIS 5.0 or later
UNCOMMENT the cross-links to this section further down the topic --AND-- in the Additional Resources of the Images article.
ALSO FROM THE DISCUSSION, NOT INCLUDED YET ...
You may elect to create an event listener for the `InputFile` component that captures the [`FileList`](https://developer.mozilla.org/docs/Web/API/FileList) and displays a preview using JavaScript.
The <xref:Microsoft.AspNetCore.Components.Forms.InputFile> component reads browser file data into .NET code. An image preview can be shown to the user prior to submitting the form using the approach in this section, which doesn't rely upon round-tripping the file's data between JS and .NET code.
Provide a JS function that:
* Receives an <xref:Microsoft.AspNetCore.Components.Forms.InputFile> element reference and the image preview element's ID.
* Sets the image source of the image preview element to the image file's object data.
The preceding tasks are shown in the following `setImage` JS function example:
```html
<script>
window.setImage = async (inputFileElement, imageElementId) => {
document.getElementById(imageElementId).src = inputFileElement.files[0];
}
</script>
```
[!INCLUDE[](~/blazor/includes/js-location.md)]
The following `PreviewInputFileImage` component uses:
* An <xref:Microsoft.AspNetCore.Components.Forms.InputFile> component to obtain an image from the user in an <xref:Microsoft.AspNetCore.Components.Forms.EditForm>.
* An `<img>` tag (`id="image"`) for displaying an image preview.
When a file is selected, the `UpdateImagePreview` method is called with <xref:Microsoft.AspNetCore.Components.Forms.InputFileChangeEventArgs>. The method invokes the `setImage` function with the <xref:Microsoft.AspNetCore.Components.Forms.InputFile> element reference and the image preview element's ID.
`Pages/PreviewInputFileImage.razor`:
```razor
@page "/preview-inputfile-image"
@inject IJSRuntime JS
<h1><code>InputFile</code> with Image Preview Example</h1>
<EditForm OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<p>
<InputFile @ref="inputFileElement" OnChange="UpdateImagePreview" /> <img id="image" />
</p>
<button type="submit">Submit</button>
</EditForm>
@code {
private ElementReference inputFileElement;
private async Task UpdateImagePreview(InputFileChangeEventArgs e)
{
await JS.InvokeVoidAsync("setImage", inputFileElement, "image");
}
private void HandleValidSubmit()
{
// Process the valid form
}
}
```
For additional guidance on JS interop, see <xref:blazor/js-interop/call-javascript-from-dotnet>.
-->
:::moniker range=">= aspnetcore-6.0"
## Multiple option selection with the `InputSelect` component