Как отправить октет / поток типа BLOB типа на сервер с помощью AJAX?

Я безуспешно пытался отправить файл Blob (который является типом файла .OBJ ) на сервер с помощью AJAX. Я хочу иметь возможность сделать это, не используя поле входного файла. Я создаю создателя онлайн-аватара, поэтому файл Blob, который будет отправлен на сервер, генерируется из символа, который первоначально импортирован в мою сцену Three.js. Я смог отправить файл Blob, содержащий String, на сервер и сохранить его в указанной папке (которую я пытаюсь сделать с файлом BLOB .OBJ). Я попытался преобразовать Blob в Base64 перед отправкой его в POST-запрос, но это не сработало. Размер файла, который я пытаюсь отправить, составляет 3 МБ.

Вот мой код JavaScript для создания файла Blob и отправки его на мой PHP-скрипт на сервере с помощью AJAX.

• Прямое обновление jQuery / Ajax SQL с помощью PHP
• Публикация строки JSON на страницу PHP
• Передача php-массива в javascript с использованием JSON
• В раскрывающемся списке, как заполнить полные поля формы из базы данных
• Выложите видео перед отправкой формы

//Create OBJ var exporter = new THREE.OBJExporter(); var result = exporter.parse(child); //Generate file to send to server var formData = new FormData(); var characterBlob = new Blob([result], {type: "octet/stream"}); var reader = new FileReader(); reader.readAsDataURL(characterBlob); reader.onloadend = function() { formData.append('file', reader.result); $.ajax({ url: "ExecuteMaya.php", // Url to which the request is send type: "POST", // Type of request to be send, called as method data: formData, // Data sent to server, a set of key/value pairs (ie form fields and values) processData:false, // To send DOMDocument or non processed data file it is set to false contentType: false, // The content type used when sending data to the server }).done(function(data) { console.log(data); }); } 

Вот мой PHP-скрипт для обработки отправленного файла.

 <?php $sourcePath = $_FILES['file']['tmp_name']; // Storing source path of the file in a variable $targetPath = "upload/".$_FILES['file']['name']; // Target path where file is to be stored move_uploaded_file($sourcePath,$targetPath) ; // Moving Uploaded file echo "<span id='success'>Image Uploaded Successfully...!!</span><br/>"; echo "<br/><b>File Name:</b> " . $_FILES["file"]["name"] . "<br>"; echo "<b>Type:</b> " . $_FILES["file"]["type"] . "<br>"; echo "<b>Size:</b> " . ($_FILES["file"]["size"] / 1024) . " kB<br>"; echo "<b>Temp file:</b> " . $_FILES["file"]["tmp_name"] . "<br>"; ?> 

Любая помощь приветствуется!

ОБНОВЛЕНИЕ 1: Результат var result = exporter.parse(child); является строкой, и всякий раз, когда я печатаю эту переменную на консоли, требуется загрузка нескольких минут. Будет ли размер этой строки возможной проблемой при попытке отправить ее на сервер?

ОБНОВЛЕНИЕ 2: Это печатает на консоли после выполнения PHP-скрипта, что заставляет меня думать, что ничто не отправляется на сервер, или отправленные данные обрабатываются неправильно PHP-скриптом.

Изображение загружено успешно … !!

Имя файла:
Тип:
Размер: 0 kB
Файл Temp:

ОБНОВЛЕНИЕ 3: Вот ссылка на файл, который я пытаюсь отправить. http://www.filehosting.org/file/details/578744/CleanFemaleOBJ.obj

Вы можете просмотреть этот файл в TextEdit / NotePad, чтобы просмотреть строку, которую я хочу отправить. Это в значительной степени текстовый файл с расширением .obj, чтобы преобразовать его в этот формат, чтобы он мог быть открыт в Maya.

ОБНОВЛЕНИЕ 4: Я теперь изменил свой код JavaScript, чтобы Blob был добавлен к FormData, а не результат reader.readAsDataURL (characterBlob).

 //Create OBJ var exporter = new THREE.OBJExporter(); var result = exporter.parse(child); //Generate file to send to server var formData = new FormData(); var characterBlob = new Blob([result], {type: "octet/stream"}); formData.append('file', result); $.ajax({ url: "ExecuteMaya.php", // Url to which the request is send type: "POST", // Type of request to be send, called as method data: formData, // Data sent to server, a set of key/value pairs (ie form fields and values) processData: false, // To send DOMDocument or non processed data file it is set to false }).done(function(data) { console.log(data); }); 

 <?php // good idea to turn on errors during development error_reporting(E_ALL); ini_set('display_errors', 1); // ini_set('max_execution_time', 300); if ($_SERVER['REQUEST_METHOD'] === 'POST') { echo "<br/><b>File Name:</b> " . $_FILES["file"]["name"] . "<br>"; echo "<b>Type:</b> " . $_FILES["file"]["type"] . "<br>"; echo "<b>Size:</b> " . ($_FILES["file"]["size"] / 1024) . " kB<br>"; echo "<b>Temp file:</b> " . $_FILES["file"]["tmp_name"] . "<br>"; echo "<b>Error:</b> " . $_FILES["file"]["error"] . "<br>"; $sourcePath = $_FILES['file']['tmp_name']; // Storing source path of the file in a variable $targetPath = "uploads/" . $_FILES['file']['name']; // Target path where file is to be stored if (move_uploaded_file($sourcePath, $targetPath)) { // Moving Uploaded file echo "<span id='success'>Image Uploaded Successfully...!!</span><br/>"; } else { echo "<span id='success'>Image was not Uploaded</span><br/>"; } exit; } ?> <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> </head> <body> <form action="form.php" method="post" enctype="multipart/form-data"> <label>File</label> <input type="file" name="file"> <input type="submit" value="Upload"> </form> <div></div> </body> <script> $(function () { $('form').on('submit', function (e) { e.preventDefault(); // logic $.ajax({ url: this.action, type: this.method, data: new FormData(this), // important processData: false, // important contentType: false, // important success: function (res) { $('div').html(res); } }); }); }); </script> </html> 

 var formData = new FormData(); formData.append('file', result); $.ajax({ url: "ExecuteMaya.php", type: "post", data: formData, // important processData: false, // important contentType: false, // important! success: function (res) { console.log(res); } });