画像をデータベースにアップロード

Question

私は自分のasp.net mvc webプロジェクト内で自分のデータベースにどのようにプロフィール画像をアップロードできるのか把握しようとしています。

実際のファイルアップロードではなくデータURIを取得し、URIがJavaScript内で生成され、フォームにある他の入力フィールドをコントローラに渡す方法がわかりません。

ビュー - フォーム

<script src="~/Scripts/jquery.cropit.js"></script> 
<script> 
    $(function() { 
     $('.image-editor').cropit({ 
      imageBackground: true, 
      imageBackgroundBorderWidth: 20, 
      initialZoom: 'image', 
      smallImage: 'stretch', 
      imageState: { 
       src: '/Images/ProfilePictures/no-img.png' 
      } 
     }); 
     $('form').submit(function() { 
      var imageData = $('.image-editor').cropit('export'); 
      // imageData containing the Data URI for the cropped image 
      $('.hidden-image-data').val(imageData); 
     }); 
    }); 
</script> 

コントローラー以下フォーム

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form", enctype = "multipart/form-data" })) 
{ 
    @Html.AntiForgeryToken() 
    <h4>Create a new account.</h4> 
    <hr /> 
    @Html.ValidationSummary("", new { @class = "text-danger" }) 

    <div class="form-group"> 
     @Html.LabelFor(m => m.ProfilePicture, new { @class = "col-md-2 control-label" }) 
     <div class="col-md-10"> 
      <div id="wrapper" style="margin-top: 20px;"> 
       <div class="image-editor"> 
        <input type="file" class="cropit-image-input"> 
        <div class="cropit-preview"></div> 
        <div class="image-size-label"> 
         Resize image 
        </div> 
        <div class="controls-wrapper"> 
         <div class="slider-wrapper"> 
          <span class="icon icon-image small-image"></span> 
          <input type="range" class="cropit-image-zoom-input custom"> 
          <span class="icon icon-image large-image"></span> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="form-group"> 
     @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" }) 
     <div class="col-md-10"> 
      @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" }) 
     </div> 
    </div> 
    <div class="form-group"> 
     @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" }) 
     <div class="col-md-10"> 
      @Html.TextBoxFor(m => m.Email, new { @class = "form-control" }) 
     </div> 
    </div> 
    <div class="form-group"> 
     @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" }) 
     <div class="col-md-10"> 
      @Html.PasswordFor(m => m.Password, new { @class = "form-control" }) 
     </div> 
    </div> 
    <div class="form-group"> 
     @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" }) 
     <div class="col-md-10"> 
      @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" }) 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-md-offset-2 col-md-10"> 
      <input type="hidden" name="profilePicture" class="hidden-image-data"> 
      <input type="submit" class="btn btn-default" value="Register"/> 
     </div> 
    </div> 
} 

Javascriptを -

public async Task<ActionResult> Register([Bind(Exclude = "ProfilePicture")]RegisterViewModel model) { 
      if (ModelState.IsValid) { 

       // To convert the user uploaded Photo as Byte Array before save to DB 
       byte[] imageData = null; 
       if (Request.Files.Count > 0) { 
        HttpPostedFileBase poImgFile = Request.Files["ProfilePicture"]; 

        using (var binary = new BinaryReader(poImgFile.InputStream)) { 
         imageData = binary.ReadBytes(poImgFile.ContentLength); 
        } 
       } 
.... more code .... 
} 
} 

を登録3210

詳細な説明は自由にお願いします。

Answer 1

データURIは、バイナリデータの非バイナリエンコーディングです。それがあなたが望むデータです。

おそらくBase64でエンコードされているため、書き込む前にサーバー側でbase64でデコードするだけです。

public class Base64Decoder 
{ 
     public static void Main() 
     { 
      string inputText = "This is some text."; 
      Console.Out.WriteLine ("Input text: {0}", inputText); 
      byte [] bytesToEncode = Encoding.UTF8.GetBytes (inputText); 

      string encodedText = Convert.ToBase64String (bytesToEncode); 
      Console.Out.WriteLine ("Encoded text: {0}", encodedText); 

      byte [] decodedBytes = Convert.FromBase64String (encodedText); 
      string decodedText = Encoding.UTF8.GetString (decodedBytes); 
      Console.Out.WriteLine ("Decoded text: {0}", decodedText); 

      Console.Out.Write ("Press enter to finish."); 
      Console.In.ReadLine(); 

      return; 
     } 
} 

：

ここcode here to encode into and from base64

は、上記のリンク先サイトからのコード例がありますです