Как отправить картинку имеющийся в Base 64 на сервер?
Мне нужно сделать так, чтобы когда я добавляла картинку она отображалась в html документе, после добавление нескольких картинок, можно было одной кнопкой submit отправить их всех на сервер. Кое-какие работы я уже сделала например преобразовала base 64 в blob и полученный результат вывела в html документ. Когда поле с файлами меняется срабатывает change и там уже идёт преобразование и отображение в html документе. Как теперь все добавленные файлы в html документ одним нажатием на submit отправить на сервер? Например добавила пять картинок потом их отправила при нажатии submit.
Вот код:
<HTML>
<HEAD>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<title>Загрузка нескольких файлов</title></HEAD>
<body>
<script>
$(document).ready(function(){
$('#form_upload').on('change', 'form input[type=file]', function()
{
var input = this;
if (input.files && input.files[0]) {
var file = input.files[0],
reader = new FileReader();
reader.onload = function(e){
var fileData = e.target.result,
parts, type, base64Data;
parts = fileData.split(',');
type = parts[0];
base64Data = parts[1];
type = type.split(';')[0].split(':')[1];
var blobImage = b64toBlob(base64Data, type);
const blobUrl = URL.createObjectURL(blobImage);
const img = document.createElement('img');
img.src = blobUrl;
document.body.appendChild(img);
}
reader.readAsDataURL(file);
}
});
$('#form_upload').on('submit', function(event){
event.preventDefault();
//При щелчке на сервер должны загружаться картинки
});
});
function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {type: contentType});
return blob;
}
</script>
<form id="form_upload" action="" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="30000" />
<input name="userfile" type="file"/>
<input type="submit" value="Отправить">
</form>
</BODY>
</HTML>
|
|
Зачем вы изображение читаете с помощью FileReader'а, затем конвертируете base64 в blob, если все равно скармливаете blob методу «URL.createObjectURL»?
https://developer.mozilla.org/ru/doc...reateObjectURL Посмотрите на параметры, которые может принимать этот метод. Вы можете полученный файл сразу скормить методу URL.createObjectURL и получить туже самую ссылку. P.S. не забывайте освобождать память от мусора с помощью метода «URL.revokeObjectURL». Сейчас вы его не используете, а стоит. |
Походу base64->blob вообще лишнее тут, если только с файлами не производится преобразование на клиенте.
|
Как загрузить на сервер, так никто не сказал.
|
Цитата:
Даже на этом форуме есть уйма результатов.
$('#form_upload').on('submit', function(event) {
event.preventDefault();
$.ajax({
url: this.action,
type: this.method,
data: new FormData(this),
contentType: false,
processData: false,
cache: false,
success: function(response) {
// handle response
}
});
});
|
Цитата:
|
<form id="form_upload" action="/path-to-handler" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="30000"/>
<input name="userfiles[]" type="file" multiple/>
<div id="previews"></div>
<input type="submit" value="Отправить"/>
</form>
<style>
img {
max-width: 150px;
margin-right: 5px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const form = document.querySelector('#form_upload');
const inputFile = form ? form.querySelector('[name="userfiles[]"]') : undefined;
if (!form || !inputFile) {
return void console.error('Form of input[type=file] not found');
}
const imagesPreviews = [];
const previewsContainer = document.querySelector('#previews');
inputFile.addEventListener('change', function () {
if (!previewsContainer || !this.files) {
return;
}
previewsContainer.innerHTML = '';
let objectUrl;
while (objectUrl = imagesPreviews.shift()) {
URL.revokeObjectURL(objectUrl);
}
[].forEach.call(this.files, function (file) {
const objectUrl = URL.createObjectURL(file);
const image = document.createElement('img');
image.alt = file.name;
image.src = objectUrl;
previewsContainer.appendChild(image);
imagesPreviews.push(objectUrl);
});
});
form.addEventListener('submit', function (e) {
e.preventDefault();
fetch(this.action, {
method: this.method,
body: new FormData(this)
}).then(function (res) {
return res.json();
}).then(function (response) {
// handle response
});
});
});
</script>
|
Уже несколько дней пытаюсь выполнить пример выше. Пересмотрела много информации в сети, не работает пример. Проблема с res.json()
Цитата:
|
Сервер возвращает не json или его, но с "грязью".
|
| Часовой пояс GMT +3, время: 07:43. |