如何使用AJAX向服务器发送类型为八位字节/流的Blob？

Question

我没有成功尝试使用AJAX 将Blob文件(.OBJ文件类型)发送到服务器.我希望能够在不使用输入文件字段的情况下执行此操作.我正在创建一个在线头像创建者,因此要发送到服务器的Blob文件是从最初导入到我的Three.js场景中的角色生成的.我已经能够将包含String的Blob文件发送到服务器并将其保存到指定的文件夹(我的目标是使用Blob .OBJ文件).我尝试在发送POST请求之前将Blob转换为Base64,但这不起作用.我尝试发送的文件大小为3MB.

这是我的JavaScript代码,用于创建Blob文件并使用AJAX将其发送到服务器上的PHP脚本.

//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的大小是否可能成为问题？

更新2:在PHP脚本执行后,它会被打印到控制台,这使我认为没有任何内容被发送到服务器或者PHP脚本没有正确处理发送的数据.

图片上传成功...... !!

文件名:
类型:
大小: 0 kB
文件温度:

更新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 (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);
    });

Answer 1

使用以下代码，我能够上传.obj文件。

我必须增加最大上传大小才能使其正常工作。

您可能还想增加您的最大执行时间，如下所述，但我不必这样做。

为简单起见，我将所有内容都放在一个名为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>

因此，首先测试一下是否可以.obj使用上面的代码上传文件。

当您测试它时，请打开浏览器的开发人员工具。监视您的网络/XHR 选项卡 [ Chrome、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 选项卡中发出的请求并查看正在发送的内容。