Использование sendAsBinary с ASP.Net MVC - PullRequest
Новая
       13

Использование sendAsBinary с ASP.Net MVC

0 голосов
/ 13 февраля 2011

Я пытаюсь использовать следующее, чтобы позволить пользователю перетаскивать фотографии на страницу и загружать эти фотографии.

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=

Как мне сохранить это изображение?Должен ли я быть в состоянии записать байтовый массив в файл?

Но моя главная задача - правильно связать модель.

Cheers

1 Ответ

4 голосов
/ 13 февраля 2011

ОК, давайте приведем это в действие. Как всегда, начнем с определения модели вида: 

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, и получайте удовольствие

...