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

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

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

//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 (i.e. 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); - это String и всякий раз, когда я печатаю эту переменную на консоль, для загрузки требуется несколько минут. Будет ли размер этой строки возможной проблемой при попытке отправить ее на сервер?

UPDATE 2: это печатается на консоль после выполнения PHP-скрипта, что заставляет меня думать, что либо ничего не отправляется на сервер, либо отправленные данные не обрабатываются правильно PHP-скриптом.

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

Имя:
тип:
размер: 0 КБ
файл Temp:

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

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

обновление 4: Теперь я изменил свой код JavaScript, чтобы Blob был добавлен к FormData, а не к результату чтения.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 (i.e. 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);
    });
6
ajax blob javascript jquery php

1 ответов

используя следующий код, я смог загрузить .

Я должен увеличить максимальный размер загрузки для его работы.

вы также можете подумать об увеличении максимального времени выполнения, как указано ниже, но мне это не нужно.

для простоты я поместил все в один файл под названием form.php.

форма.в PHP

<?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>

Итак, сначала проверьте, можете ли вы загрузить используя код выше.

когда вы тестируете его, откройте инструмент разработчика Вашего браузера. Контролируйте вкладку Network/XHR [хром, в Firefox] чтобы увидеть запрос, который будет сделан при нажатии кнопки Загрузить.

если это работает, попробуйте использовать ту же логику в исходном коде.

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);
    }
});

опять же, контролируйте запрос, сделанный на вкладке Network/XHR, и посмотрите, что отправляется.

1