Php html文件阅读器：将blob转换为图像文件？_Php_Javascript_Html

Php html文件阅读器：将blob转换为图像文件？

php javascript html

Php html文件阅读器：将blob转换为图像文件？,php,javascript,html,Php,Javascript,Html,客户端代码 <head> <script> var reader = new FileReader(); var objVal; var image = new Image(); reader.onload = function(e) { document.getElementById('propertyImg').setAttribute('src', e.target.result); }; function readURL(input){

客户端代码

<head>
<script>
var reader = new FileReader(); 
var objVal;
var image = new Image();
reader.onload = function(e) {
    document.getElementById('propertyImg').setAttribute('src', e.target.result);
};

function readURL(input){    
    if(input.files && input.files[0]){
        reader.readAsDataURL(input.files[0]);
    }
    else {
        document.images[0].src = input.value || "No file selected";
    }
}

function sendPost(){
            var url = 'http://myurl.com';
            var name = document.getElementById('fileInput').files[0].name;
    var data = document.getElementById('propertyImg').getAttribute('src');
    var f = document.createElement("form"); 
    var imgName = document.createElement("input"); 
    var imgData = document.createElement("input"); 
    var f_attr = { 'method' : 'post' , 'action' : url};
    var imgName_attr = {"type" : "hidden", "name" : "img_name", "value" : name};
    var imgData_attr = {"type" : "hidden", "name" : "data", "value" : data};
    setAttributes(f, f_attr);
    setAttributes(imgName, imgName_attr);
    setAttributes(imgData, imgData_attr);
    f.appendChild(imgName);
    f.appendChild(imgData);
    document.body.appendChild(f); 
    f.submit(); 
}

function setAttributes(el, attrs) {
    for(var key in attrs) {
        el.setAttribute(key, attrs[key]);
    }
}
</script>
<body>
   <img id="propertyImg" src="./img/sprite.png"></img>  
   <input type='file' id='fileInput'class='width70_prop' onchange="readURL(this);"></input>
   <button onclick="sendPost()">sendPost</button>
</body>


var reader=new FileReader（）；
var objVal；
var image=新图像（）；
reader.onload=函数（e）{
document.getElementById（'propertyImg'）.setAttribute（'src'，e.target.result）；
};
函数readURL（输入）{
if（input.files&&input.files[0]）{
reader.readAsDataURL（input.files[0]）；
}
否则{
document.images[0].src=input.value | |“未选择任何文件”；
}
}
函数sendPost（）{
var url='1〕http://myurl.com';
var name=document.getElementById（'fileInput'）。文件[0]。名称；
var data=document.getElementById（'propertyImg'）.getAttribute（'src'）；
var f=document.createElement（“表单”）；
var imgName=document.createElement（“输入”）；
var imgData=document.createElement（“输入”）；
var f_attr={'method'：'post'，'action'：url}；
var imgName_attr={“type”：“hidden”，“name”：“img_name”，“value”：name}；
var imgData_attr={“type”：“hidden”，“name”：“data”，“value”：data}；
setAttributes（f，f_attr）；
setAttributes（imgName、imgName_attr）；
设置属性（imgData、imgData_attr）；
f、 儿童（imgName）；
f、 附肢儿童（imgData）；
文件.正文.附件（f）；
f、 提交（）；
}
函数集合属性（el、ATTR）{
for（属性中的变量键）{
el.setAttribute（key，attrs[key]）；
}
}
邮政局

服务器端代码

<html>
    <head>
    <?
          $FileName = $_POST['img_name']; 
          $data = $_POST['data']; 
          list($header, $content) = split('[,]', $data); 
          file_put_contents($FileName, base64_decode($content));
          print "Data Written"; 
     ?>
    <script>
    function showImg(){
    var imgSrc =  "<?=$data?>";
    var imgDiv = document.getElementById('imgDiv');
    imgDiv.src = imgSrc;
    }
    </script>
    </head>
    <body>
    <img id='imgDiv'></img>
    <button onclick="showImg()">show</button>
    </body>
</html>


函数showImg（）{
var imgSrc=“”；
var imgDiv=document.getElementById（'imgDiv'）；
imgDiv.src=imgSrc；
}
显示

发送到服务器的blob包含有关头及其内容的信息。当我拆分标题然后保存解码的内容时，它工作了。。。。

我改变了上面的代码，现在可以工作了。thx guys

首先，POST[“data”]中没有任何内容，因为索引（data）是由JSON

key:value

对中的键命名的，而不是JavaScript

var

其次，你应该改变这一点：

$Handle = fopen($FileName, 'w');
fwrite($Handle, $data); 
print "Data Written"; 
fclose($Handle);

为此：

file_put_contents($FileName, base64_decode($data));

哎呀。。有人打败了我。。。当您在客户端以Dataurl形式读取文件时：reader.readAsDataUrl（…）该文件被编码为base64字符串。。这就是为什么如果直接保存数据，它的格式不正确。

正如前面的回答所述，您可以将数据解码为正确的格式。

如果您将文件作为base64字符串编写，您应该首先尝试解码，或者使用xhr来代替它。谢谢。。谢谢blob发送了标题和内容。我将标题和内容从blob中拆分，然后按照u提供的格式解码内容。。它起作用了。。。又是thx