只允许在blazor中上传特定的文件类型



我使用BlazorInputFile包在Blazor中上传文件。

问题

此代码不起作用。

<InputFile OnChange="OnFileUpload" accept="image/x-png,image/jpeg" title="Upload jpeg or png image" />

如何限制用户只能在Blazor中上传jpeg或png?如果需要更多的东西来支持这个问题,请告诉我。

早期版本中可能存在错误,但需要明确的是,InputFile组件有一个AdditionalAttributes字典,该字典捕获任何未指定的属性,然后将其直接放在类型文件的输入上。

[Parameter(CaptureUnmatchedValues = true)]
public IDictionary<string, object>? AdditionalAttributes { get; set; }

这意味着您可以传递它未尝试处理的属性,但它们会将其传递到正确的位置。

因此,您可以指定accept属性,或,就像常规输入标记一样。

<InputFile OnChange="OnFileChange" class="custom-file-input" accept=".csv,.xlsx" />

另请参阅:

使用<输入类型=";文件">?

我有一个Steve Sanderson的InputFile的包装器,它有一个AllowedExtensions属性。这是一个事后过滤器,意味着用户必须上传文件,然后你告诉他们不允许使用文件扩展名。有完整的线程在做预上传的方式,这是很难说至少。

这是我上传后的做法:

Nuget:DataJuggler.Blazor.FileUpload

包括Blazor示例项目在内的完整源代码位于此处:

https://github.com/DataJuggler/BlazorFileUpload

最相关的部分总结如下:

使用DataJuggler.Blazor.FileUpload

<FileUpload CustomSuccessMessage="Your file uploaded successfully." 
OnReset="OnReset" ResetButtonClassName="localbutton" ShowStatus="false"
PartialGuidLength="10" MaxFileSize=@UploadLimit FilterByExtension="true" 
ShowCustomButton="true"  ButtonText="Start" OnChange="OnFileUploaded"
CustomButtonClassName="startbutton" ShowResetButton="false" 
AppendPartialGuid="true" AllowedExtensions=".jpg;.png;"
CustomExtensionMessage="Only .jpg and .png files are allowed." 
InputFileClassName="customfileupload" Visible=false
FileTooLargeMessage=@FileTooLargeMessage>
</FileUpload>

请注意AllowedExtensions和CustomExtensionMessage的两个属性。

以下是我处理FileUploaded:的代码的相关部分

// Create a new instance of a 'FileInfo' object.
FileInfo fileInfo = new FileInfo(file.Name);
// I don't know if it's even possible for an extension to be upper case
uploadedFileInfo.Extension = fileInfo.Extension.ToLower();
// if FilterByExtension is true and the AllowedExtensions text exists
if ((FilterByExtension) && (!String.IsNullOrWhiteSpace(AllowedExtensions)))
{
// verify the extension exists
if (!String.IsNullOrWhiteSpace(fileInfo.Extension))
{
// If the allowed extensions // fixed issue where uploading 
abort = !AllowedExtensions.ToLower().Contains(fileInfo.Extension.ToLower());
}
else
{
// you must have an extension
abort = true;
}
}

也许这会给你一些想法。

如果你想看一个使用它的实时网站,我几天前刚刚发布了这篇文章:https://pixeldatabase.net-使用BQL编辑图像-位图查询语言

相关内容

  • 没有找到相关文章

最新更新