Question

我在本地计算机上有一个存储在WAMP64 / MySQL中的blob，我想测试它（通过localhost）并使用XMLHttpRequest将其传递给包含Javascript的HTML文件。这似乎是最好的方法。我知道我需要指定xttp.responseType =“blob”。但是我不明白如何将我的PHP文件中的blob传递给我的HTML文件，我想知道是否有人可以帮助我。这是我的xtptest.html文件：

<html>
<head>
this is a test
</head>
<body onload="loadDoc()">
<p> in the body </p>
<script>
var theResponse;
function loadDoc() {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.response="blob";
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                // at this point, blob should be in this.response                
                theResponse=new Float32Array(this.response);
                // should now be able to cast the blob as Float32

            }
        };
        xmlhttp.open("GET","saveAlgebraicBlob.php",true);
        xmlhttp.send();
   }
</script>
</body>
</html>

这是我的saveAlgebraicBlob.php文件（必须在这里添加html标签以使其正确格式化），这不是保存blob而只是通过algebraicFunctionBlob类从数据库中检索它。我可以检索blob，解析并在PHP文件中正确显示它，但似乎无法将其传输到我的Javascript代码中。

<html>
<?php
/*
 saveAlgebraicBlob.php
 */

include 'Hexdump.php';
include 'algebraicFunctionBlobClass.php';




$blobObj = new algebraicFunctionBlob();


// store blob in database
//$blobObj->insertBlob('test5.bin',"functionTrace2");

$a = $blobObj->selectBlob(2);

$myval=substr($a['webGLData'],0,100);
$myFunctionData=unpack("f*",$myval);

hexdump($myval,16,'html');

var_dump(unpack("f*",$myval));
//$myval=100;
// include "java10.html";
echo $myval;



?>
</html>

Answer 1

将.responseType替换为.response。请注意，如果您使用.response填充Float32Array，则应将.responseType设置为"arraybuffer"

xmlhttp.responseType = "arraybuffer";

Answer 2

我做了这个改动，现在想确认我正在检索数据。据我了解，我需要使用FileReader来读取blob。但是，当我尝试执行以下代码时，必须出现错误，因为警报（reader.result）;命令不执行。注意reader.result应该返回一个适合于转换的类型数组，我相信它是Float32Array。

<html>
<head>
this is a test
</head>
<body onload="loadDoc()">
<p> in the body </p>
<script>
var theResponse;
function loadDoc() {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.responseType = "blob";
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                // at this point, blob should be in this.response       

                var reader = new FileReader();
                reader.addEventListener("loadend", function() {
                      // reader.result contains the contents of blob as a typed array
                });
                reader.readAsArrayBuffer(blob);
                alert(reader.result);
                // should now be able to cast the blob as Float32

            }
        };
        xmlhttp.open("GET","saveAlgebraicBlob.php",true);
        xmlhttp.send();
   }
</script>
</body>
</html>

Answer 3

这就是我最初解决这个问题的方法，尽管我认为这不是最好的。

是否有更有效的方法来转移大斑点？有没有办法在我下面生成的blob末尾没有cr / lf传输blob？

我是网络编程的新手，并希望将这个402字节的示例扩展为250Mb blob。这是我访问我的SQL数据库的PHP代码，其中包含我在Mathematica中创建的包含100个32位浮点数的非常小的blob（402字节）：

<?php

include 'Hexdump.php';
include 'algebraicFunctionBlobClass.php';

$blobObj = new algebraicFunctionBlob();

// uncomment to store blob in database
//$blobObj->insertBlob('test5.bin',"functionTrace2");

$a = $blobObj->selectBlob(8);

// echo the data but will have cr and lf appended to data  
echo $a['webGLData'];

?>

以下是用于检索博客然后将前400个字节转换为Float32Array的简短HTML / Javascript代码，我在调试器中确认变量myData4中包含的数字与我在Mathematica中生成的值匹配：

<html>
<head>
this is a test
</head>
<body onload="loadDoc()">
<p> in the body </p>
<script>
var theResponse;
var myIntBuffer;
var myFloatBuffer;
var myDataView;
var myval;
var myval2;
var myBuffer=new ArrayBuffer(1000);

var test2;
var blob;
var reader;
var myData2;
var myData3;
var myData4;

function loadDoc() {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.responseType = "blob";
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {

        theResponse=this.response;
        reader = new FileReader();
        reader.addEventListener("loadend", function() {
   // reader.result contains the contents of blob as a typed array

   // blob sent by echo has carriage return/line feed at end so chop off:

   myData4=new Float32Array(reader.result.slice(0,400));

               });
            reader.readAsArrayBuffer(theResponse);

            }
        };
        xmlhttp.open("GET","saveAlgebraicBlob.php",true);
        xmlhttp.send();
   }
</script>
</body>
</html>

需要帮助使用XMLHttpRequest将blob从MySql传输到Javascript

3 个答案: