Как отправить картинку имеющийся в 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. |