仅允许特定文件类型在 blazor 中上传
Allow only specific file type to upload in blazor
我正在使用 BlazorInputFile
包在 Blazor 中上传文件。
问题
此代码无效。
<InputFile OnChange="OnFileUpload" accept="image/x-png,image/jpeg" title="Upload jpeg or png image" />
如何限制用户只能在 Blazor 中上传 jpeg 或 png?如果需要更多的东西来支持这个问题,请告诉我。
我有一个 Steve Sanderson 的 InputFile 的包装器,它有一个 AllowedExtensions 属性。
这是事后过滤器,这意味着用户必须上传文件,然后您告诉他们不允许使用文件扩展名。做pre-upload方式的帖子满天飞,说难就难。
这是我上传后的做法:
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 编辑图像 - 位图查询语言
之前的版本中可能存在错误,但需要明确的是,InputFile 组件有一个 AdditionalAttributes 字典,用于捕获任何未指定的属性,然后直接放置到类型文件的输入中。
[Parameter(CaptureUnmatchedValues = true)]
public IDictionary<string, object>? AdditionalAttributes { get; set; }
这意味着您可以传递它未尝试处理的属性,但它们会到达正确的位置。
因此您可以指定一个 accept 属性,或 class,就像常规输入标签一样。
<InputFile OnChange="OnFileChange" class="custom-file-input" accept=".csv,.xlsx" />
另请参阅:
Limit file format when using <input type="file">?
我正在使用 BlazorInputFile
包在 Blazor 中上传文件。
问题
此代码无效。
<InputFile OnChange="OnFileUpload" accept="image/x-png,image/jpeg" title="Upload jpeg or png image" />
如何限制用户只能在 Blazor 中上传 jpeg 或 png?如果需要更多的东西来支持这个问题,请告诉我。
我有一个 Steve Sanderson 的 InputFile 的包装器,它有一个 AllowedExtensions 属性。 这是事后过滤器,这意味着用户必须上传文件,然后您告诉他们不允许使用文件扩展名。做pre-upload方式的帖子满天飞,说难就难。
这是我上传后的做法:
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 编辑图像 - 位图查询语言
之前的版本中可能存在错误,但需要明确的是,InputFile 组件有一个 AdditionalAttributes 字典,用于捕获任何未指定的属性,然后直接放置到类型文件的输入中。
[Parameter(CaptureUnmatchedValues = true)]
public IDictionary<string, object>? AdditionalAttributes { get; set; }
这意味着您可以传递它未尝试处理的属性,但它们会到达正确的位置。
因此您可以指定一个 accept 属性,或 class,就像常规输入标签一样。
<InputFile OnChange="OnFileChange" class="custom-file-input" accept=".csv,.xlsx" />
另请参阅:
Limit file format when using <input type="file">?