與ASP.Net一起使用sendAsBinary MVC

Question

我試圖使用以下方式來允許用戶將照片拖到頁面上並將這些照片上傳。

http://alex-tech-adventures.com/development/x-html--css--javascript/97-drag-and-drop-upload-using-html5-with-firefox.html

現在，我一直試圖讓這個模型結合工作，但迄今還沒有多少運氣與內置的東西。有誰知道我能得到這個工作？？？

作爲備份，我知道我用的InputStream拉發送的數據作爲一個字符串，然後sdserialize到我的對象......

var stream = this.Request.InputStream; 
var result = ""; 
using (var reader = new StreamReader(stream)) 
{ 
    result = reader.ReadToEnd(); 
} 
var serializer = new JavaScriptSerializer(); 
var typedObjectResult = serializer.Deserialize<UploadInput>(result); 

但我有轉換的圖像部分消息轉換爲字節數組，然後將其保存到文件中。圖像的字符串內容如下所示。

data:image/jpeg;base64,/9j/4RjhRXhpZg........3Xuve9de6//9k= 

如何將其保存爲圖像？我應該能夠將字節數組寫入文件嗎？

但我最關心的是讓模型綁定正確。

乾杯

Answer 1

好吧，讓我們將其付諸行動。與往常一樣首先來定義視圖模型：

public class ImageData 
{ 
    public string Description { get; set; } 
    public string Filename { get; set; } 
    public string Image { get; set; } 
} 

然後控制器：

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(); 
    } 

    [HttpPost] 
    public ActionResult Index(IEnumerable<ImageData> images) 
    { 
     foreach (var item in images ?? Enumerable.Empty<ImageData>()) 
     { 
      var tokens = item.Image.Split(','); 
      if (tokens.Length > 1) 
      { 
       var buffer = Convert.FromBase64String(tokens[1]); 
       var file = Path.Combine(HttpContext.Server.MapPath("~/"), item.Filename); 
       System.IO.File.WriteAllBytes(file, buffer); 
      } 
     } 
     return Json(new { Status = "OK" }); 
    } 
} 

最後一個觀點：

<div id="uploadArea" style="background-color: yellow; width: 170px; height: 50px;"> 
    drop images here 
</div> 

@Html.ActionLink("Upload images", "index", null, new { id = "upload" }) 
<div id="imagesContainer" /> 


<script type="text/javascript"> 
    $('#uploadArea').bind('dragover', function (event) { 
     event.preventDefault(); 
    }).bind('drop', function (event) { 
     event.preventDefault(); 
     var files = event.originalEvent.dataTransfer.files; 
     $.each(files, function (index, file) { 
      var img = $('<img/>') 
       .addClass('droppedImage') 
       .attr('data-filename', file.name); 
      $('#imagesContainer').append(img); 
      img.file = file; 
      var reader = new FileReader(); 
      reader.onloadend = function() { 
       img.attr('src', reader.result); 
      } 
      reader.readAsDataURL(file); 
     }); 
    }); 

    $('#upload').click(function() { 
     var imagesJson = $('.droppedImage').map(function() { 
      var $this = $(this); 
      return { 
       image: $this.attr('src'), 
       filename: $this.attr('data-filename') 
      }; 
     }).toArray(); 

     $.ajax({ 
      url: this.href, 
      type: 'POST', 
      data: JSON.stringify({ images: imagesJson }), 
      contentType: 'application/json', 
      success: function (result) { 
       alert('success'); 
      } 
     }); 
     return false; 
    }); 
</script> 

現在開啓你的HTML 5兼容的瀏覽器帶來的無限樂趣。