Обновление «скрытых» двоичных данных в ASP.NET MVC для события «drop» в HTML5

Question

Мне нужно выяснить, как base64 кодировать ответ от HTML5 FileReader ...

Вот проблема - я добавил слушатель события drop в div, чтобы вы могли перетаскивать-добавить файл изображения на мою страницу ... это форма Razor ASP.NET MVC3, которая имеет поле @ html.HiddenFor (...), которое содержит байтовый массив, представляющий изображение ...

Если пользователь перетаскивает файл в мой блок, то я хочу обновить «значение» моего скрытого поля ввода.

Мой обработчик отбрасывания на стороне клиента выглядит примерно так:

dropArea.addEventListener("drop", function (evt) {

    var draggedFiles = evt.dataTransfer.files;

    if (typeof (draggedFiles) != "undefined") {
        xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                var reader = new FileReader();

                reader.onload = (function (theFile) {
                    return function (e) {
                        var hiddenInput = document.getElementById("myMvcHiddenInputField");
                        hiddenInput.value = base64.encode(e.target.result);
                    };
                })(draggedFiles[0]);

                reader.readAsBinaryString(draggedFiles[0]);
            }
        }

        xhr.open("post", "/MyController/SetTempImage", true);

        xhr.setRequestHeader("Content-Type", "multipart/form-data");
        xhr.setRequestHeader("X-File-Name", draggedFiles[0].fileName);
        xhr.setRequestHeader("X-File-Size", draggedFiles[0].fileSize);
        xhr.setRequestHeader("X-File-Type", draggedFiles[0].type);

        xhr.send(draggedFiles[0]);

        evt.preventDefault();
        evt.stopPropagation();
    }
}, false);

... проблема заключается в том, как я обрабатываю ответ от FileReader ... мне нужно перекодировать результаты так, как ASP.NET ожидает скрытое поле (base64.encodeбиблиотеку jquery, которую я скачал ... Я почти уверен, что это не то, что мне нужно здесь, так как я не думаю, что она предназначена для кодирования двоичных данных)«скрытые» байтовые массивы на страницах MVC, как мне кодировать данные файла на клиенте такчто он может реинтегрироваться с моими данными модели, когда они отправляются обратно на сервер?

... Уже поздно ... Я подозреваю, что это звучит как бред ... но если кто-то может понять мою проблему, ваша помощь будет принята с благодарностью.

Answer 1

Я знаю, что это старый, но попробуйте:

reader.readAsDataURL(draggedFiles[0]);