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

Question

I have a blob stored in WAMP64/MySQL on my local machine and I would like to test retrieving it (via localhost) and passing it to an HTML file containing Javascript using an XMLHttpRequest. 我在本地计算机上的WAMP64 / MySQL中存储了一个Blob，我想测试（通过本地主机）检索它并将它使用XMLHttpRequest传递到包含Javascript的HTML文件中。 This seems the best way to do this. 这似乎是最好的方法。 I understand I need to specify xttp.responseType="blob". 我了解我需要指定xttp.responseType =“ blob”。 However I do not understand how to pass the blob from my PHP file to my HTML file and I was wondering if someone could help me. 但是，我不明白如何将Blob从我的PHP文件传递到HTML文件，我想知道是否有人可以帮助我。 Here is my xtptest.html file: 这是我的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>

And here is my saveAlgebraicBlob.php file (had to add html tags in here to get it to format properly) which is not saving the blob but merely retrieving it from the database via the algebraicFunctionBlob class. 这是我的saveAlgebraicBlob.php文件（必须在此处添加html标记以使其正确格式化），它不是保存blob，而是仅通过algebraicFunctionBlob类从数据库中检索它。 I can retrieve the blob, parse and display it properly in the PHP file but cannot seem to transfer it into my Javascript code. 我可以检索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

Substitute .responseType for .response . 将.responseType替换为.response 。 Note if you are populating a Float32Array with .response you should set .responseType to "arraybuffer" 注意：如果你是填充一个Float32Array与.response你应该设置.responseType到"arraybuffer"

xmlhttp.responseType = "arraybuffer";

Answer 2

I made that change and now wish to confirm I am retrieving the data. 我进行了更改，现在希望确认我正在检索数据。 As I understand it, I need to use FileReader to read the blob. 据我了解，我需要使用FileReader读取blob。 However, when I try to execute the following code, there must be an error because the alert(reader.result); 但是，当我尝试执行以下代码时，肯定会发生错误，因为alert（reader.result）; command does not execute. 命令不执行。 Note reader.result should return a typed array suitable for casting as Float32Array I believe. 注意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

This is how I am initially solving this problem although I think it's not the best. 这是我最初解决此问题的方式，尽管我认为这不是最好的。

Is there a more efficient way of transferring large blobs? 有没有更有效的转移大斑点的方法？ Is there a way to transmit the blob without the cr/lf at the end of the blob I generated below? 有没有一种方法可以在我下面生成的Blob末尾不带cr / lf的情况下传输Blob？

I am very new to web programming and would like to scale-up this 402 byte example to 250Mb blobs. 我是Web编程的新手，想将此402字节示例扩展到250Mb Blob。 Here is my PHP code that I access my SQL database containing a very small blob (402 bytes) I created in Mathematica containing 100 32-bit floating point numbers: 这是我访问的SQL数据库的PHP代码，其中包含一个很小的Blob（402字节），我在Mathematica中创建了该Blob，其中包含100个32位浮点数：

<?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'];

?>

And here is the short HTML/Javascript code I used to retrieve the blog and then cast the first 400 bytes to Float32Array which I confirmed in the debugger that the numbers contained in variable myData4 matched the values I generated in Mathematica: 这是我用来检索博客，然后将前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 个解决方案

解决方案1
0 2016-10-12 18:00:42

解决方案2
0 2016-10-12 18:16:17

解决方案3
0 2016-10-13 14:45:55

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

问题描述

3 个解决方案

解决方案1 0 2016-10-12 18:00:42

解决方案2 0 2016-10-12 18:16:17

解决方案3 0 2016-10-13 14:45:55

解决方案1
0 2016-10-12 18:00:42

解决方案2
0 2016-10-12 18:16:17

解决方案3
0 2016-10-13 14:45:55