html FileReader：将blob转换为图像文件？

客户端代码
html FileReader：将blob转换为图像文件？

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

服务器端代码

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

发送到服务器团块具有信息来源约报头和它的内容。当我拆分标题然后保存解码其内容，它的工作.... 我改变了上面的代码现在工作。 thx guys

来源

2012-10-23 Seho Lee

你正在写你的文件作为base64字符串，你应该真的尝试解码它，也许去一个xhr而不是那个东西。 – Delta

首先，$_POST["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));

来源

2012-10-23 03:50:06 SomeKittens

谢谢..谢谢!! blob发送标题和内容。我把头文件和内容表单blob分开，然后解码内容，就像你提供的那样。它再次运行...... thx –

哎呀..有人打我吧... 当你在客户方读取文件作为Dataurl： reader.readAsDataUrl（...）该文件被编码为base64字符串..这就是为什么如果直接保存数据，它的格式不正确。如前面的答案所述，您将base64_decode解码为正确的格式。

来源

2012-10-23 03:52:33 user1600124

html FileReader：将blob转换为图像文件？

回答

相关问题