Есть задача. На странице есть input type file
. В него пользователь добовляет картинку. С помощью FileReader
она конвертируется в base64 и вставляется в img src
. На странице отобразилась картинка. В итоге я буду передавать её на сервер и сохранять в бд. А в дальнейшем когда буду редактировать запись, эта base64 строка будет передаваться на клиент и должна будет вставляется опять же в img src
что бы пользователь увидел какая картинка у редактируемой записи. Для быстроты тестирования у меня пока что 1 контроллер в который передаётся base64 строка и сразу же выкидывается назад. Есть 2 тестируемые картинки, побольше и поменьше. Обе прилитают на клиент в access ajax запроса, но та которая побольше при попытки вставки в src
вылетает с ошибкой, а та которая поменьше вставляется но почти вся кортинка размывается.
JS:
//Добавление нового автомобиля
$('#modalWindow').on('click', '#btnConfirm', function () {
$.ajax({
type: "POST",
url: "/Home/_AddNewCar",
data: $('form').serialize() + "&base64img=" + $('#autoPicture').attr('src'),
success: function (data) {
$('#autoPicture').attr('src', data);
},
error: function (error) {
alert(error.responseText);
}
});
});
//Изменение содержимого загружаемого файла
$('#modalWindow').on('change', '#fileLoader', function () {
ReadImageUrl(this);
});
function ReadImageUrl(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
reader.onload = function (e) {
$('#autoPicture').attr('src', e.target.result);
}
}
else {
$('#autoPicture').attr('src', '');
}
}
Контроллер:
[HttpPost]
public String _AddNewCar(Car car, string base64img)
{
return base64img;
}
Изначальные изображения:
1)
2)
Так вот по первому которое побольше при попытке вставить в src вылетает вот такая вот ошибка:
А по второй картинке ошибки нет но после вставки base64 в src вот что в результате выходит:
Подскажите пожалуйста, в чём может быть дело? Я ведь даже со строкой нечего не делаю, отправляю её назад сразу.
При прямой передаче данных на сервер необходимо что бы в строке оказывались только допустимые в url символы. Функция serialize()
для формы делает это автоматически. Но в строках base64 могут встречаться не допустимые символы которые должны быть соответствующим образом закодированы при передаче. Это делается с помощью JS функции encodeURIcomponent
:
....
data: $('form').serialize()
+ "&base64img="
+ encodeURIcomponent($('#autoPicture').attr('src')),
....
Виртуальный выделенный сервер (VDS) становится отличным выбором
Нужно написать функцию,которая определяет, изограмма ли данный текст (слово) или нет, то есть в нем повторяются буквы или нет
Есть js функция модального окна внутри, которого есть такие функции как открыть, закрыть модальное окноТеперь надо при нажатии на <button class="choose">ok</button>...
Написал собственный компонент с поддержкой ReactiveFormsКогда указываю свой компонент в template и использую formControl="form
Делаю калькулятор для сайта багетной мастерскойПри выборе багета (рамы, в которую будет вставлена картина), нужно фото этого багета накладывать...