时间戳

首页 > 解决方案 > 文件上传没有图像路径可以保存到服务器

c# - 文件上传没有图像路径可以保存到服务器

问题描述

我正在尝试在我的控制器中的 create 方法中上传一个文件，所以我有我的表单。 

   <div class="form-group">
     <input type="file" id="ProfileImage"  class="btn-primary float-left" name="FormFile">
   </div>
 <button type="submit" class="btn-primary">Save </button> &nbsp;&nbsp;&nbsp;
</form>

在我的 Poi 模型中，我有

public string  ProfileIamge { get; set; }

在我的控制器中，我的创建是这样的

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("Id,FirstName,MiddleName,Address1,Flag,Address2,City,County,PostCode,ProfileImage,LastName,Nationallity,Role,DOB,Age,Alias,PlaceOfBirth,CountryOfBirth,Deceased,DeceasedDate,AddressId,EmailAddress,FacebookUrl,TwitterUrl,LinkedInUrl,CopmanyName,CompanyAddress,StartDate,EndDate,isDeleted,isActive,CreatedDate,CreatedBy,Tattoos,FacialFeatures,Alias")] POI pOI) { 

var test = pOI.ProfileIamge;     
}

但是测试没有本地图像路径我可以问为什么我使用 asp.net 3.1 和 ef 3.1.7

一旦我获得了值，我不知道如何上传文件，我只需要不知道为什么它没有按应有的方式绑定。

此外，一旦选择了文件，将如何提供预览图像。

编辑 2

我尝试了以下方法来预览图像

 <div class="form-group">
     <img id="imgPreview" src="" alt="" style="display: none"/>
      <input type="file" id="FormFile" class="btn-primary float-left" name="FormFile">
  </div>

jQuery

<script type="text/javascript">
  $(function () {
    $('#FormFile').change(function () {
        $('#imgPreview').hide();
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#imgPreview').show();
            $('#imgPreview').attr("src", e.target.result);
          
        }
        reader.readAsDataURL($(this)[0].files[0]);
    });
</script>

但是图片没有预览

标签： c#asp.net-core

解决方案

对于其他任何人来说，这对我有用。

确保在您的控制器中使用 IFormFile FormFile

例如

public async Task<IActionResult> Create([Bind("Id,FirstName,MiddleName,Address1,Flag,Address2,City,County,PostCode,ProfileImage,LastName,Nationallity,Role,DOB,Age,Alias,PlaceOfBirth,CountryOfBirth,Deceased,DeceasedDate,AddressId,EmailAddress,FacebookUrl,TwitterUrl,LinkedInUrl,CopmanyName,PoiReason,CompanyAddress,StartDate,EndDate,isDeleted,isActive,CreatedDate,CreatedBy,Tattoos,FacialFeatures,Alias")] POI pOI, IFormFile FormFile) {
  int attachmentId = await UploadProfileImage(FormFile, (int)FileAttachments.UploadAreEnum.Poi, pOI.Id, 0);            
}

然后在我的上传功能中，我将可以访问该文件

public async Task<int> UploadProfileImage(IFormFile FormFile, int UploadArea, int PoiId, int VesselId)
{
     //do something with the upload create a record in the db
}

对于预览，我使用了以下

<div class="form-group">
    <img id="previewImg"  src="/images/missing-profile-image.jpg" width="200" height="200"/>

</div>
<div class="form-group">      
    <input type="file" id="FormFile" class="btn-primary float-left" onchange="previewFile(this);"  name="FormFile">
</div>

jQuery

<script>
  function previewFile(input){
    var file = $("input[type=file]").get(0).files[0];
    if(file){
        var reader = new FileReader();
        reader.onload = function(){
            $("#previewImg").attr("src", reader.result);
        }
 
        reader.readAsDataURL(file);
    }
 }
</script>

推荐阅读