有没有办法将 input type="file" 'HttpPotedFileBase' 的 src 设置为 asp.net mvc 中已上传的图片?
Posted
技术标签:
【中文标题】有没有办法将 input type="file" \'HttpPotedFileBase\' 的 src 设置为 asp.net mvc 中已上传的图片?【英文标题】:Is there a way to set the src of input type="file" 'HttpPotedFileBase' set to already uploaded Picture in asp.net mvc?有没有办法将 input type="file" 'HttpPotedFileBase' 的 src 设置为 asp.net mvc 中已上传的图片? 【发布时间】:2021-10-16 18:42:17 【问题描述】:我正在从事一个项目,我必须在其中创建一个简历生成器。我正在使用相同的表单进行编辑和插入。 Edit 返回相同的 Index 方法,但带有关于该 ID 的特定信息。 我的问题是我不知道如何在输入类型 =“文件”中绑定该特定图像,并且我总是遇到“请选择图像”的情况。 所有图片都保存在我在项目中创建的 Images 文件夹中。
屏幕截图 When I am browsing and choosing an Image When I return View with specific information about that Id
剃刀视图
@using (html.BeginForm(null, null, FormMethod.Post, new enctype = "multipart/form-data", id = "quickForm" ))
<div class="col-md-4">
<!-- Image Upload -->
<div class="container">
<div class="avatar-upload">
<div class="avatar-edit">
<input type='file' name="File" id="File" src="@(Model.ImagePath != null && File.Exists(Server.MapPath(Model.ImagePath)) ? Server.MapPath(Model.ImagePath) : Url.Content("~/Content/Images/Default_Image.png" ))" accept=".png, .jpg, .jpeg" required />
<label for="File"></label>
</div>
<div class="avatar-preview" style="width:100%;height:13em">
<div id="imagePreview" style="background-image: url('@(Model.ImagePath != null && File.Exists(Server.MapPath(Model.ImagePath)) ? Url.Content(Model.ImagePath) : Url.Content("~/Content/Images/Default_Image.png" ))');">
@*../../Content/Images/Default_Image.png*@
</div>
</div>
</div>
<h1>
Image Upload
<small>.png, .jpg, .jpeg</small>
</h1>
</div>
</div>
我是通过 JQuery 设置 File 的来源
function readURL(input)
if (input.files && input.files[0])
var reader = new FileReader();
reader.onload = function (e)
$('#imagePreview').css('background-image', 'url(' + e.target.result + ')');
$('#imagePreview').hide();
$('#imagePreview').fadeIn(650);
$('#File').attr('src', e.target.result);
reader.readAsDataURL(input.files[0]);
$("#File").change(function ()
readURL(this);
);
模型类
public class BasicInformation
[Required]
[DatabaseGenerated(DatabaseGeneratedOption.Identity)]
public int Id get; set;
[StringLength(150)]
public string ImageTitle get; set;
[StringLength(150)]
public string ImagePath get; set;
[NotMapped]
public HttpPostedFileBase File get; set;
控制器方法
public ActionResult Index(int? id)
BasicInformation info = db.BasicInformation.Find(id);
if (info != null)
return View(info);
else
BasicInformation information = new BasicInformation();
return View(information);
【问题讨论】:
【参考方案1】:不幸的是,由于安全限制,您无法更改输入 type="file" 的值。
Look here.
我有同样的问题;我正在创建一个用于创建和编辑相同数据的表单。做到这一点的唯一方法是在没有文件的情况下提交请求,并在后端检查文件是否存在于 post 请求中。如果存在,则在数据库/磁盘中替换它,如果不存在,则保留旧的。
但是用户如何理解文件是否存在?唯一的方法是放置一些指示当前文件的内容。
对于图像,我通常在旁边放置一个<img>
,然后用数据库中现有的 img 填充 img。
然后,如果你想让它变得更好,你可以监听
For example, look this
【讨论】:
我正在使用 jQuery 预览图像。顺便说一句,感谢您的反馈。不过对我来说真的很不幸,因为在前端,我使用 JQuery 验证表单并随后发送 ajax 请求。如果文件不存在,则不会发送 Ajax 请求。对我来说不幸的是,我想我现在必须重构我的代码。【参考方案2】:您可以尝试从 src1 属性创建一个 blob,然后创建一个 File 对象。创建一个剪贴板对象以访问 FileList,然后将文件添加到文件列表中,并将输入中的文件列表替换为剪贴板中的文件列表
// show the file in the input field
$('#File').on('change', function()
var url = URL.createObjectURL(this.files[0]);
$('#Image').prop('src', url);
);
var url = $('#File').attr('src');
fetch(url)
.then(res => res.blob())
.then(blob =>
const dt = new ClipboardEvent('').clipboardData || new DataTransfer();
dt.items.add(new File([blob], 'some_file_name.ext'));
$('#File').prop('files', dt.files);
$('#File').trigger('change');
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='file' name="File" id="File" src="data:image/png;base64,iVBORw0KGgoAAA
ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU
5ErkJggg==" accept=".png, .jpg, .jpeg" required />
<img id="Image">
-
我建议改用
data-src
作为属性。
【讨论】:
以上是关于有没有办法将 input type="file" 'HttpPotedFileBase' 的 src 设置为 asp.net mvc 中已上传的图片?的主要内容,如果未能解决你的问题,请参考以下文章
有没有办法抑制 <input type="number"> 的科学记数法?
有啥办法可以防止 input type="number" 得到负值?
iphone H5 input type="search" 不显示搜索 解决办法
input type="file" accept="image/*"上传文件慢的问题解决办法