Мне нужно сделать так, чтобы когда я добавляла картинку она отображалась в 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>